/* INHALT: 1. SKILLS 2. SPEZIALISIERUNG 3. ELIXIER 4. ITEMS 5. TALISMAN 6. PARAON 7. SÖLDNER */


/*****************/
/* ACTIVE SKILLS */
/*****************/

.d4-active-skills .grd-3 {gap:1rem 2rem;}
.d4-active-skills .grd-3 > div img {width:4rem;height:4rem;box-shadow:var(--bx-shadow-small);}
.d4-active-skills .grd-3 > div p {width:calc(100% - 5.5rem);overflow-wrap: break-word;word-break: normal;}

.d4-active-skills .grd-3 > div {gap:1.5rem;position:relative;}
.d4-active-skills .grd-3 > div:after {height:1px;background:var(--c06);bottom:-.6rem;right:0;position:absolute;
    width:calc(100% - 5.5rem);}

@media screen and (min-width:768px) {
    .d4-active-skills .grd-3 > div:nth-child(-n + 3):not(:nth-last-child(-n + 3)):after {content:'';}
}
@media screen and (max-width:767px) {
    .d4-active-skills .grd-3 > div:nth-child(-n + 4):not(:nth-last-child(-n + 2)):after {content:'';}
    .d4-active-skills .grd-3 > div img {width:3.5rem;height:3.5rem;}
    .d4-active-skills .grd-3 {gap:1rem 1.5rem;}
    .d4-active-skills .grd-3 > div {gap:1rem;}
    .d4-active-skills .grd-3 > div:after {width:calc(100% - 4.5rem);}
    .d4-active-skills .grd-3 > div p {width:calc(100% - 4.5rem);margin:-.5rem 0;line-height:var(--f-line-height-p-m)!important;}
}


/**********************/
/**********************/
/**********************/
/* 1. SKILLS          */
/**********************/
/**********************/
/**********************/

/**************/
/* WICHTIG: FÜR SAFARI ASPECT RATIO SKILLTREE AN 3 STELLEN ANGEBEN!!!
/*
/* .d4-tree .canvas-wrap {height: 0;padding-bottom: 218%;}
/* .d4-tree .lines {position: absolute;width: 100%;aspect-ratio: 100/218;z-index: 0;pointer-events: none;}
/* .d4-tree .canvas {width: 100%;height: 0;padding-bottom: 218%;position: relative;overflow: hidden;}
/*
/* AUßERDEM SVG ANPASSEN: <svg class="lines" viewBox="0 0 100 200" preserveAspectRatio="none">
/**************/

:root {
    --aspect-padding: 228%;
    --aspect-ratio: 100/228;
}

.d4-tree {display: flex;align-items: stretch;}
.d4-tree .canvas-wrap {width:calc(100% - 27.8rem);position: relative;
    background: #020202 url('/wp-content/uploads/Background-Texture-Dark.png') center center repeat;}
.d4-tree .canvas {width: 100%;height:100%;position: relative;overflow: hidden;}

.string, .tab-string {font-size:1px!important;display:none!important;pointer-events:none;}

/* POINTS SPENT */

.points {position:absolute;height:2.8rem;background:var(--c10);border-radius:var(--br);top:1rem;left:1rem;padding:0 .8rem;display:flex;align-items:center;z-index:50;
    border:1px solid var(--c06);pointer-events:none;}


/* Skilltree TTP Version */

.d4-tree:not(.fallback-mode) .canvas-wrap {/*height:0;padding-bottom: var(--aspect-padding);*/}
.d4-tree:not(.fallback-mode) .canvas {container-type: size;height:0;padding-bottom: var(--aspect-padding);}

/* Fullsize Styles */

@media screen and (min-width:768px) {
    .d4-tree.fullsize .tree-list-wrap {display:none;}
    .d4-tree.fullsize .canvas-wrap {width:100%;}
    .d4-tree.fullsize .canvas-wrap:before {display:none;}
}

/****************/
/* FALLBACK IMG */
/****************/

.d4-tree-fallback img {width:100%;height:auto;display:block;}
.fullscreen {position:absolute;top:1rem;right:1rem;z-index:50;}
@media screen and (max-width:767px) {.fullscreen{display:none;}}

/****************/
/* NODES        */
/****************/

.canvas-wrap .nodes {position: absolute;width: 100%;height: 100%;z-index: 5;}
.canvas-wrap .nodes>div {position: absolute;aspect-ratio: 1/1;transform: translate(-50%, -50%);}
.canvas-wrap .nodes>div img {width: 100%;height: 100%;object-fit: cover;}

/* Hub */
.canvas-wrap .hub {width: calc(5% + 3px);container-type: size;}
.canvas-wrap .hub>div {position:relative;}
.canvas-wrap .hub>div img {transform:scale(.9);}
.canvas-wrap .hub>div:after {content:'';position:absolute;left:-25%;top:-25%;width:150%;height:150%;z-index:-1;
    background: url('/wp-content/uploads/d4-skill-hub.webp') center center no-repeat;background-size:contain;}

/* Skills */
.canvas-wrap .skl {width: calc(4% + 3px);container-type: size;}
.canvas-wrap .skl>div {box-shadow: 0cqw 5cqw 30cqw 5cqw rgba(0, 0, 0, .5);}

/* Modifikatoren */
.canvas-wrap .mod {width: calc(3% + 1px);container-type: size;}
.canvas-wrap .mod>div {clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);overflow: hidden;}
.canvas-wrap .mod:after {content: '';position: absolute;width: 75%;height: 75%;border: 7cqw solid rgb(60, 60, 60);
    left: 50%;top: 50%;z-index: 5;pointer-events: none;transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 5cqw 5cqw 30cqw 5cqw rgba(0, 0, 0, .5);}

/* Passives */
.canvas-wrap .pas, .canvas-wrap .spt {width: calc(2% + 1px);container-type: size;z-index:50;}
.canvas-wrap .pas>div, .canvas-wrap .spt>div {box-shadow: 0cqw 5cqw 30cqw 5cqw rgba(0, 0, 0, .5);border-radius: 50%;overflow:hidden;}
.canvas-wrap .pas>div img, .canvas-wrap .spt>div img {transform:scale(1.1);}
.canvas-wrap .pas:after, .canvas-wrap .spt:after {content: '';position: absolute;border-radius:50%;width:110%;height:110%;
    border: 9cqw solid rgb(60, 60, 60);left: 50%;top: 50%;z-index: 5;pointer-events: none;
    transform: translate(-50%, -50%);box-shadow: 5cqw 5cqw 30cqw 5cqw rgba(0, 0, 0, .5);}

/* Cross */
.canvas-wrap .crs {width:1.2%;container-type: size;background:var(--c11);border-radius:1px;box-shadow: 1px 1px 2px 1px black;
    transform: translate(-50%, -50%) rotate(45deg) !important;}
.canvas-wrap .crs.skilled {background:var(--c04);}
.canvas-wrap .crs:before {content: '';position: absolute;top:-20%;bottom:-20%;left:-20%;right:-20%;} 

/* Skilled */
.canvas-wrap .skilled span {position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;
    transition:.2s;z-index:20;color:var(--c01);font-size:70cqw!important;background: var(--c04);border-radius:2px;
    font-weight:bold!important;padding-bottom: 2cqw;}
.canvas-wrap .skilled:after {background:var(--c04);border:none;transition:.2s;}
.canvas-wrap .nodes > div:not(.skilled) img {filter: brightness(0.7);transition:.2s;}
.canvas-wrap .nodes > div.hub img, .canvas-wrap .nodes > div:not(.skilled):hover img {filter: brightness(1)!important;}

/****************/
/* LINES        */
/****************/

.canvas-wrap .lines {position: absolute;width: 100%;aspect-ratio: var(--aspect-ratio);z-index: 0;pointer-events: none;}
.canvas-wrap .lines polyline {fill: none;stroke: var(--c11);stroke-width: .2;stroke-linecap: round;stroke-linejoin: round;}
.canvas-wrap .lines polyline.hub-con {stroke-width: .8;}
.canvas-wrap .lines polyline.skilled {stroke: var(--c04);}

/****************/
/* SKILL LIST   */
/****************/

.d4-tree .tree-list-wrap {width:27.8rem;border-left: 1px solid var(--c06);display: flex;flex-direction: column;position:relative;}
.d4-tree .tree-list-headline {min-height: 4.8rem;width: 100%;display: flex;align-items: center;justify-content: center;
    border-bottom: 1px solid var(--c06);background: var(--c08);padding: var(--v10) var(--v20);}
.d4-tree .tree-list-headline:not(:first-child) {border-top: 1px solid var(--c06);}
.d4-tree .tree-list-headline:first-child {border-radius: 0 1px 0 0;}
.d4-skill-list {flex-grow: 1;position: relative;min-height:30rem;}
.d4-skill-list>div {position: absolute;overflow-y: auto;height: 100%;width: 100%;padding: var(--v20) var(--v20);}

@media screen and (max-width:767px) {
    .d4-skill-list:after {content:'';background:red;width:100%;height:6rem;bottom:0;left:0;z-index:20;position:absolute;
        pointer-events:none;background: linear-gradient(0deg, rgba(17, 17, 17, 1) 0%, rgba(17, 17, 17, 0) 100%);
        border-radius:0 0 1px 1px;}
}

.list-skill {display:none;align-items:center;margin-bottom:1.2rem;position:relative;}
.list-skill p {padding:0;}
.list-skill .symbol {position:relative;z-index:4;}
.list-skill .name {padding-left:1.2rem;width:calc(100% - 2.6rem);margin: -1rem 0;}
.list-skill.skilled {display:flex;}
.list-skill .name span {transition:.2s;}
.list-skill.highlight .name span {color:var(--c03);}
.list-skill.highlight .name .node-level {color:var(--c00);background:var(--c03);}

/* NODE LEVEL */
.list-skill .node-level {position:absolute;left:-1rem;top:1.4rem;border-radius:var(--br);background:var(--c04);color:var(--c01);
    padding:0 .2rem;height:1.8rem;min-width:1.8rem;display:flex;align-items:center;justify-content:center;z-index:10;
    letter-spacing:0!important;box-shadow:var(--bx-shadow-small);}

/* TRENN LINIEN ZWISCHEN CLUSTERN */
.list-skill.skl {padding-top:1.1rem;}
.list-skill.skl:before {content:'';position:absolute;top:-.2rem;left:-.2rem;width:calc(100% + .2rem);height:1px;background:var(--c06);}

/* AKTIV */
.list-skill.skl .symbol {width:2.6rem;height:2.6rem;}
.list-skill.skl .symbol:after {content:'';position:absolute;left:-18%;top:-18%;width:136%;height:136%;z-index:2;
    background:url('/wp-content/uploads/d4-skill-aktiv-base.webp') center center no-repeat;background-size:contain;}
.list-skill.skl .symbol img {position:relative;z-index:5;}
.list-skill.skl .name span {font-weight:bold!important;}

/* PASSIV & SPLITTER */
.list-skill:is(.pas, .spt) .symbol {width:2.4rem;height:2.4rem;margin:0 .1rem;}
.list-skill:is(.pas, .spt) .symbol:after {content:'';position:absolute;left:-16%;top:-16%;width:132%;height:132%;z-index:2;
    background:url('/wp-content/uploads/d4-skill-passiv-base.webp') center center no-repeat;background-size:contain;}
.list-skill:is(.pas, .spt) .symbol:before {content:'';position:absolute;left:0%;top:0%;width:100%;height:100%;z-index:6;
    border-radius:50%;border: 1.5px solid var(--c01);box-shadow: inset 0 0 3px 1px rgba(0,0,0,.8);}
.list-skill:is(.pas, .spt) .symbol img {position:relative;z-index:5;border-radius:50%;}

/* MOD */
.list-skill.mod .symbol {width:2.4rem;height:2.4rem;margin:0 .1rem;}
.list-skill.mod .symbol:after {content:'';position:absolute;left:-22%;top:-22%;width:144%;height:144%;z-index:2;
    background:url('/wp-content/uploads/d4-skill-modifikator-base.webp') center center no-repeat;background-size:contain;}
.list-skill.mod .symbol:before {content:'';position:absolute;left:0%;top:0%;width:100%;height:100%;z-index:6;
    border: 1.5px solid var(--c01);box-shadow: inset 0 0 3px 1px rgba(0,0,0,.8);transform: rotate(45deg) scale(.75);}
.list-skill.mod .symbol img {position:relative;z-index:5;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);}

/* MOD SPLITTER */
.list-skill.mod .name-title:after {color:var(--c05);}
.list-skill.mod.spt-baer .name-title:after {content:' (Werbär)';}
.list-skill.mod.spt-mensch .name-title:after {content:' (Mensch)';}
.list-skill.mod.spt-wolf .name-title:after {content:' (Werwolf)';}

/* LINES */
.list-skill:not(.skl):before {content:'';position:absolute;background: var(--c11);z-index:0;width:.4rem;height:150%;left:1.1rem;
    bottom:50%;}

/**********************/
/**********************/
/**********************/
/* 2. SPEZIALISIERUNG */
/**********************/
/**********************/
/**********************/

.spez-sticky {position:sticky;top:calc(10rem + 1px);}
@media screen and (max-width:1099px) {.spez-sticky {top:11.5rem;}}
.d4-spez {padding: var(--v20)!important;}
.spez-list {display:flex;flex-wrap:wrap;justify-content:center;gap:0 .5rem;}
.spez-list .inline {display:flex;align-items:center;gap:0;justify-content:center;position:relative;}
.spez-list .inline span {display:none;}
.spez-list .inline img {margin:0!important;opacity:1;width:5.2rem;height:5.2rem;}
.spez-list.spez-1 .inline:nth-child(1) img,
.spez-list.spez-2 .inline:nth-child(2) img,
.spez-list.spez-3 .inline:nth-child(3) img,
.spez-list.spez-4 .inline:nth-child(4) img {opacity:1;}

.spez-list.circle .inline {box-shadow:var(--bx-shadow-small);border-radius:50%;}

.spez-list.spez-1.karo .inline:nth-child(1):before, 
.spez-list.spez-2.karo .inline:nth-child(2):before,
.spez-list.spez-3.karo .inline:nth-child(3):before,
.spez-list.spez-4.karo .inline:nth-child(4):before {content:'';position:absolute;z-index:10;width:3.6rem;height:3.6rem;
    left:50%;top:50%;border-radius:var(--br);transform:translate(-50%,-50%) rotate(45deg);
    box-shadow: 0 0 0 2px rgba(182, 170, 137, 1), 0 0 15px 2px rgba(182, 170, 137, .4);}

.spez-list.spez-1.circle .inline:nth-child(1):before, .spez-list.spez-5.circle .inline:nth-child(5):before,
.spez-list.spez-2.circle .inline:nth-child(2):before, .spez-list.spez-6.circle .inline:nth-child(6):before,
.spez-list.spez-3.circle .inline:nth-child(3):before, .spez-list.spez-7.circle .inline:nth-child(7):before,
.spez-list.spez-4.circle .inline:nth-child(4):before, .spez-list.spez-8.circle .inline:nth-child(8):before {
    content:'';z-index:10;position:absolute;width:4.5rem;height:4.5rem;left:50%;top:49%;border-radius:50%;
    transform:translate(-50%,-50%);box-shadow: 0 0 0 2px rgba(182, 170, 137, 1), 0 0 15px 2px rgba(182, 170, 137, .4);}

.buch-der-toten span img {width:100%;max-height:4.5rem;object-fit:contain;}
@media screen and (max-width:767px) {.buch-der-toten span img {max-height:5.5rem;}}
.spez-list.shard.circle .inline:before {width:5rem!important;height:5rem!important;top:50%;}
.spez-list.shard.circle .inline:nth-last-child(-n+3) {transform:scale(.8) translatey(.5rem);}

/**********************/
/* MOBILE *************/
/**********************/

@media screen and (max-width:767px) {
    .d4-tree {flex-direction:column;}
    .d4-tree .canvas-wrap {width:100%;}
    .d4-tree .tree-list-wrap {width:100%;border: none;}
    .d4-tree.fullsize .canvas-wrap:before {display:none;}
    .d4-tree .tree-list-headline {border-top: 1px solid var(--c06);min-height:4rem;}
    .d4-spez {padding:var(--v15)!important;}
    .d4-spez > div {max-width:27.8rem;margin:0 auto;}
}


/**********************/
/**********************/
/**********************/
/* 3. ELIXIER         */
/**********************/
/**********************/
/**********************/

.item-block-basic.elixir .desc:after {display:none;}
.item-block-basic.elixir .desc {padding:0;display:grid;grid-template-columns: repeat(2, minmax(1px, 1fr));min-height:8.7rem;}
.item-block-basic.elixir .desc > div {position:relative;min-height:4.8rem;display:flex;align-items:center;
    padding: .8rem var(--v20) .8rem 6.8rem;}
.item-block-basic.elixir .desc > div:after {content:'';position:absolute;z-index:0;left:0;top:0;height:100%;width:calc(4.8rem + 1px);
    background:var(--c01);border-right:1px solid var(--c06);}
.item-block-basic.elixir .desc > div img { position:absolute;z-index:1;left:.5rem;top:50%;transform:translatey(-50%);
    width:3.8rem;height:calc(100% - 1rem);margin:0;}

@media screen and (min-width:767px) {
    .item-block-basic.elixir .desc > div:nth-child(-n+2) {border-bottom:1px solid var(--c06);}
    .item-block-basic.elixir .desc > div:nth-child(odd) {border-right: 1px solid var(--c06);}
}
@media screen and (max-width:767px) {
    .item-block-basic.elixir .desc {grid-template-columns: repeat(1, minmax(1px, 1fr));}
    .item-block-basic.elixir .desc > div {min-height:4rem;padding: .7rem var(--v15) .7rem 5.5rem;}
    .item-block-basic.elixir .desc > div:not(:last-child) {border-bottom:1px solid var(--c06);}
    .item-block-basic.elixir .desc > div:after {width: calc(4rem + 1px);}
    .item-block-basic.elixir .desc > div img {left:.4rem!important;width:3.2rem;}
}
/*
.elixier .inside > div:not(:nth-last-child(-n + 2)) {border-bottom:1px solid var(--c06);}
.elixier .inside > div:nth-child(2n + 1) {border-right:1px solid var(--c06);}
.elixier .inside > div {min-height:6.4rem;position:relative;}
.elixier .inside > div .f-btn-small {position:absolute;pointer-events:none;left:7rem;top:1.3rem;}
.elixier .inside > div .inline {width:100%;height:100%;padding:3rem 2rem .5rem 6.9rem;}
.elixier .inside > div .inline img {position:absolute;width:3rem;height:100%;z-index:5;left:.9rem;top:.2rem;}
.elixier .inside > div .inline:before {content:'';position:absolute;background:var(--c01);left:0;top:0;z-index:0;
    width:calc(4.8rem + 1px);height:100%;border-right:1px solid var(--c06);}

@media screen and (max-width:767px) {
    .elixier .inside > div:not(:last-child) {border-bottom:1px solid var(--c06);}
    .elixier .inside > div {border-right:none!important;min-height:5.4rem;}
    .elixier .inside > div .inline {padding:2.4rem 2rem .5rem 5.4rem;}
    .elixier .inside > div .f-btn-small {left:5.5rem;top:1.1rem;}
    .elixier .inside > div .inline:before {width:4rem;}
    .elixier .inside > div .inline img {left:.4rem;}
}*/


/**********************/
/**********************/
/**********************/
/* 4. ITEMS           */
/**********************/
/**********************/
/**********************/

/************************/
/* ITEM ÜBERSICHT *******/
/************************/

.item-block-basic {display:flex;overflow:hidden;}
.item-block-basic:not(:last-child) {margin-bottom:-1px;}
.item-block-basic .slot {background:var(--c08);border-right:1px solid var(--c06);min-width:21.8rem;display:flex;align-items:center;
    padding:.4rem var(--v15) .4rem var(--v10);font-weight:bold!important;font-size: var(--f-size-p-l) !important;}
.item-block-basic .slot img {width:4.2rem;height:4.2rem;opacity:.6;}
.item-block-basic .desc {flex-grow:1;min-height:4.8rem;display:flex;align-items:center;position:relative;padding:.8rem var(--v20) .8rem 6.8rem;}
.item-block-basic .desc:after {content:'';position:absolute;z-index:0;left:0;top:0;height:100%;width:calc(4.8rem + 1px);background:var(--c01);border-right:1px solid var(--c06);}
.item-block-basic .desc > .inline > img {position:absolute;z-index:1;left:.5rem;top:50%;transform:translatey(-50%);width:3.8rem;height: calc(100% - 1rem);margin:0;}
.item-block-basic .sockel {flex-grow:1;display:flex;align-items:center;justify-content:flex-end;padding: .4rem var(--v15) .4rem 0;gap:0;min-width:7rem;}
.item-block-basic .sockel .inline {display:flex;align-items:center;}
.item-block-basic .sockel .inline span {display:none;}
.item-block-basic .sockel .inline img {margin:0;width:3rem;height:3rem;}

@media screen and (max-width:767px) {
    .item-block-basic .slot {min-width:4rem;padding:0;}
    .item-block-basic .slot img {width:calc(4rem - 1px);height:calc(4rem - 1px);}
    .item-block-basic .slot span {display:none;}
    .item-block-basic .desc {min-height:4rem;padding: .7rem var(--v15) .7rem 5.5rem;}
    .item-block-basic .desc::after {width:calc(4rem + 1px);}
    .item-block-basic .desc > .inline > img {left: .4rem;width: 3.2rem;}
    .item-block-basic .desc > .inline, .item-block-basic .desc > .inline span {font-size:var(--f-size-p-m)!important;line-height:var(--f-line-height-p-m)!important;}
    .item-block-basic .sockel .inline img {width:2.5rem;height:2.5rem;}
    .item-block-basic .sockel {padding: .4rem var(--v10) .4rem 0;}
}

/************************/
/* ITEM DETAILS *********/
/************************/

.item-block {display:flex;flex-direction:column;overflow:hidden;}
.item-block-ttp {display:flex;flex-grow:1;}
.item-block-wrap {display:flex;flex-direction: column;flex-grow:1;background: var(--c10);}

/* HEADER ITEM SLOT *****/

.item-block-wrap .slot {min-height:4.8rem;display:flex;justify-content:space-between;align-items:center;padding:0 .3rem 0 var(--v20);}
.item-block-wrap .slot img {width:4.2rem;height:4.2rem;opacity:.6;}

/* ASPEKT/UNIQUE NAME ***/

.item-block .name {background: var(--c09);}
.item-block .name .name-label {display:none;}
.item-block .name figure {width:calc(4.8rem + 1px);}
.item-block .name > div:first-child {width:calc(100% - 4.8rem - 1px);}
.item-block .name .name-title {text-transform:none!important;letter-spacing:0!important;
    padding: 1.4rem var(--v15) 1.4rem var(--v20)!important;font-weight: var(--f-weight-regular) !important;
    font-family:var(--f-family-text-primary)!important;font-size:var(--f-size-p-m)!important;line-height:var(--f-line-height-p-m)!important;}
.item-block .name .name-title.unique {color:var(--c-uni);}
.item-block .name .name-title.mythisch {color:var(--c-myt);}
.item-block .name {display:flex;min-height: 4.8rem;}

/* AFFIX LISTE **********/

.item-block-wrap .affixes {flex-grow:1;display:flex;flex-direction:column;justify-content:space-between;}
.item-block-wrap .affix-implizit {margin-bottom:.715em;padding-bottom:calc(.715em - 1px);border-bottom:1px solid var(--c07);}
.item-block-wrap .temper {margin-top:calc(.715em - 1px);padding-top:.715em;border-top:1px solid var(--c07);}
.item-block-wrap ul {padding:0;}
.item-block-wrap .affixes {padding: var(--v15) var(--v20);}
.item-block-wrap .affix-list {flex-grow:1;}

/* AFFIX ASPEKT FIX *****/

.affixes .card .name, .affixes .card .grad-top:before {display:none;}
.affixes .card .aspect-star {margin-bottom:0;}
.affixes .card .inner {padding:0!important;}
.affixes .card {box-shadow:none;background:transparent;border-radius:0;border:none;}
.item-block .unique-affix .inner > div > *:not(ol):not(li) {display:none;}
.item-block .aspect-block {display:none;}


/* GA VE ****************/

.affixes .d4-affix {color:var(--c02);}
.affixes :is(.ve, .ga) .d4-affix, .affixes :is(.ve, .ga) {color: var(--c00);}
.affixes :is(.ve, .ga):before, .unique-affix .inner :is(.ve, .ga):before {content:'';width:1.4rem;height:1.4rem;position:absolute;left:-.15em;top:.25em!important;border:none;border-radius:0;opacity:1;}
.affixes .ga:before, .unique-affix .inner .ga:before {background:url('/wp-content/uploads/d4-afx-ga.webp') center center no-repeat;
    background-size:contain;}
.affixes .ve:before, .unique-affix .inner .ve:before {background:url('/wp-content/uploads/d4-afx-ve.webp') center center no-repeat;
    background-size:contain;}
.affixes .ve.ga:before, .unique-affix .inner .ve.ga:before {background:url('/wp-content/uploads/d4-afx-ga-ve.webp') center center no-repeat;
    background-size:contain;}

/* HÄRTUNG **************/

.affixes .temper svg {width:1.6rem;height:0.96rem;fill:var(--c04);margin-right:.1em;}

/* SOCKEL ***************/

.affixes .sockel {min-height:5.1rem;margin-top:calc(.715em - 1px);padding-top:.715em;border-top:1px solid var(--c07);}
.affixes .sockel .inline img {position:absolute;margin:0;top:50%;transform:translatey(calc(-50% + .05rem));left: -.45rem;}
.affixes .sockel li:before {display:none;}


/************************/
/* TTP & MOBILE FIXES ***/
/************************/

.tippy-content .item-block-wrap.d4-aspekt .card .aspect-star {margin-top:1rem!important;padding-top:.6em!important;
    border-top:1px solid var(--c07);}
.tippy-content .item-block-wrap.d4-aspekt .card .aspect-star:before {top:.9em;}
.tippy-content .item-block-wrap .slot, .tippy-content .item-block-wrap .name:before {display:none;}
.tippy-content .item-block-wrap .name {background:var(--c08);}
.tippy-content .item-block-wrap {background: var(--c09);}
.tippy-content .item-block-wrap .unique-affix .inner > div > *:not(ol):not(li) {display:none;}
.tippy-content .item-block-wrap .aspect-block .inner > div > ol {display:none;}

@media screen and (max-width:767px) {
    .item-block .card .name > div:first-child {padding:0!important;}
    .item-block-wrap .affixes {padding: var(--v10) var(--v15);}
    .item-block-wrap .slot {padding: 0 0 0 var(--v15);min-height: 4rem;}
    .item-block .name .name-title {padding: .7rem var(--v15)!important;}
    .item-block .name {min-height: 4rem;}
    .item-block-wrap .slot img {width:3.8rem;height:3.8rem;}
    .item-block .name figure {width: calc(4rem + 1px);}
    .affixes .sockel {min-height:unset;}
}

/************************/
/* SUB TABS *************/
/************************/

.sub-tabs {min-height:4.8rem;background:var(--c08);padding:0 var(--v20);}
.sub-tabs ul {display:flex;gap:var(--v20);padding:0!important;align-items: stretch;}
.sub-tabs ul li:before {display:none;}
.sub-tabs ul li {display:flex;align-items:stretch;padding:0;}
.sub-tabs ul a {display:flex;align-items:center;color:var(--c02);position:relative;}
.sub-tabs ul a:hover {color:var(--c03);}
.sub-tabs ul li.active a {color:var(--c03);}
.sub-tabs ul li.active a:after {content:'';position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--c03);}
.sub-tabs ul li a:before {content: '';position: absolute;pointer-events: none;z-index: 5;height: 0;width: 0;opacity: 0;bottom: 0rem;
    left: calc(50% - .7rem);border-right: solid .7rem transparent;border-left: solid .7rem transparent;
    border-bottom: solid .7rem var(--c03);transition: opacity .2s;}
.sub-tabs ul li.active a:before {opacity: 1;}


.sub-tabs .help:before {display:none;}
.sub-tabs .help img {width:1.4rem;height:1.4rem;}
.sub-tabs .help span {display:flex;gap:.2em;align-items:center;}

@media screen and (max-width:767px) {
    .sub-tabs {min-height:8rem;flex-direction:column;padding:0;}
    .sub-tabs .help:before {display:block;}
    .sub-tabs .help {order:1;border-radius:1px 1px 0 0;min-height:4rem;background:var(--c09);flex-wrap:wrap;padding:.5rem var(--v15);gap:0 var(--v10);justify-content:center;}
    .sub-tabs ul {order:2;min-height:4rem;padding: 0 var(--v15)!important;border-top: 1px solid var(--c06);justify-content: center;}
}

/************************/
/* ITEM DETAIL NAVI *****/
/************************/

.item-block {scroll-margin-top: calc(11.5rem - 1px);}
.item-details-mobile {display:none;}
@media screen and (max-width:767px) {
    .item-details-wrap {display:flex;justify-content:space-between;}
    .item-details-mobile {width:4rem;display:block;}
    .item-details-mobile .sticky {position:sticky;top:11.5rem;display:flex;flex-direction:column;}
    .item-details-mobile img {width:3.8rem;height:3.8rem;opacity:.6;transition:.2s;}
    .item-details-mobile a {height:4rem;display:flex;align-items:center;position:relative;}
    .item-details-mobile a.highlight img {opacity:1;}
    .item-details-mobile a.highlight {background:var(--c08);}
    .item-details-mobile a.highlight:before {content:'';position:absolute;width:1px;height:100%;left:-1px;top:0;background:var(--c04);}
    .item-details-mobile a:not(:last-child) {border-bottom:1px solid var(--c06);}
    .item-details {width:calc(100% - 5.5rem);}
    .mobile-anchor {scroll-margin-top:11.5rem;}
}
@media screen and (max-width:550px) {
    .item-details-mobile .sticky {top:10.5rem;}
    .mobile-anchor {scroll-margin-top:10.5rem;}
}


/**********************/
/**********************/
/**********************/
/* 5. TALISMAN        */
/**********************/
/**********************/
/**********************/

.d4-talisman {display:flex;flex-wrap:wrap;overflow:hidden;}
.d4-talisman > div {width:50%;}
.d4-talisman-list {border-right:1px solid var(--c06);}
.d4-talisman-list .list-item {display:flex;align-items: stretch;min-height:4.8rem;}
.d4-talisman-list .list-item:not(:last-child) {border-bottom:1px solid var(--c06);}
.d4-talisman-list .list-item > div:first-child {width:4.8rem;background:var(--c01);padding:var(--v05);
    border-right:1px solid var(--c06);}
.d4-talisman-list .list-item > div:first-child img {width:100%;height:100%;object-fit:contain;object-position:center;}
.d4-talisman-list .list-item.locked > div:first-child {padding:var(--v10);background: var(--c08);}
.d4-talisman-list .list-item > div:last-child {display:flex;align-items:center;padding:var(--v05) var(--v20);}
.d4-talisman-list .list-item > div:last-child > * {padding:0;}

.d4-talisman-list .list-item:not(.zauber):not(.siegel) > div:first-child img {display:none;}
.d4-talisman-list .list-item:not(.zauber):not(.siegel) > div:first-child {position:relative;}
.d4-talisman-list .list-item:not(.zauber):not(.siegel) > div:first-child:before {content:'';position:absolute;left:.4rem;top:50%;width:4rem;
    transform:translateY(-50%);background:url('/wp-content/uploads/d4-zauber-unique-convert.webp') center center no-repeat;
    aspect-ratio:1/1;background-size:cover;}

.d4-talisman-ui {background:var(--c01);position:relative;overflow:hidden;}
.d4-talisman-ui .img-bg {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:0;object-fit:cover;height:100%;}
.d4-talisman-ui .icons {position:absolute;width:100%;height:100%;z-index:5;container-type: size;}
.d4-talisman-ui .icons > div {position:absolute;left:50%;top:50%;width:5rem;height:5rem;}
.d4-talisman-ui .icons > div > span {transform:translate(-50%,-50%);display:block;}
.d4-talisman-ui .icons > div img {width:100%;height:100%;object-fit:contain;object-position:center;}
.d4-talisman-ui .icons > div img[alt="Locked"] {transform:scale(.7);}
.d4-talisman-ui .icons > div:nth-child(1) {transform: translate(-9.4rem, 5.2rem);}
.d4-talisman-ui .icons > div:nth-child(2) {transform: translate(-9.4rem, -5.2rem);}
.d4-talisman-ui .icons > div:nth-child(3) {transform: translate(0, -10.3rem);}
.d4-talisman-ui .icons > div:nth-child(4) {transform: translate(9.3rem, -5.2rem);}
.d4-talisman-ui .icons > div:nth-child(5) {transform: translate(9.3rem, 5.2rem);}
.d4-talisman-ui .icons > div:nth-child(6) {transform: translate(0, 10.3rem);}
.d4-talisman-ui .icons > div:nth-child(7) {width:5.5rem;height:5.5rem;}

.d4-talisman-ui .icons > div span:not(.zauber):not(.siegel) img {display:none;}
.d4-talisman-ui .icons > div span:not(.zauber):not(.siegel) {position:relative;}
.d4-talisman-ui .icons > div span:not(.zauber):not(.siegel):before {content:'';position:absolute;left:50%;top:50%;width:5rem;
    transform:translate(-50%, -50%);background:url('/wp-content/uploads/d4-zauber-unique-convert.webp') center center no-repeat;
    aspect-ratio:1/1;background-size:cover;}

.d4-talisman-set {flex-basis:100%;background:var(--c10);border-top:1px solid var(--c06);min-height:4.8rem;display:flex;
    align-items:center;justify-content:center;padding:var(--v10) var(--v20);gap:.7rem;}
.d4-talisman-set p {padding:0;}

.list-item.set-item  {color:var(--c-set);}
.list-item.unique    {color:var(--c-uni);}
.list-item.legendaer {color:var(--c-leg);}
.list-item.magisch   {color:var(--c-mag);}

@media screen and (max-width:767px) {
    .d4-talisman > div {width:100%;flex-basis:100%;}
    .d4-talisman-ui {height: 28rem;order:1;border-bottom:1px solid var(--c06);}
    .d4-talisman-ui .icons > div {width:4.2rem;height:4.2rem;}
    .d4-talisman-list {order:2;border-right:none;}
    .d4-talisman-list:before {display:none;}
    .d4-talisman-list .list-item {min-height:4rem;justify-content: space-between;}
    .d4-talisman-list .list-item > div:first-child {width:4rem;order:2;border-left:1px solid var(--c06);border-right:none;}
    .d4-talisman-list .list-item > div:last-child {padding:var(--v05) var(--v15);order: 1;}
    .d4-talisman-set {order:3;flex-direction:column;align-items:flex-start;gap:0;padding: var(--v10) var(--v15);}
    .d4-talisman-set {min-height:4rem;}
    .d4-talisman-ui .icons > div:nth-child(1) {transform: translate(-7.7rem, 4.4rem);}
    .d4-talisman-ui .icons > div:nth-child(2) {transform: translate(-7.7rem, -4.4rem);}
    .d4-talisman-ui .icons > div:nth-child(3) {transform: translate(0, -8.6rem);}
    .d4-talisman-ui .icons > div:nth-child(4) {transform: translate(7.7rem, 4.4rem);}
    .d4-talisman-ui .icons > div:nth-child(5) {transform: translate(7.7rem, -4.4rem);}
    .d4-talisman-ui .icons > div:nth-child(6) {transform: translate(0, 8.6rem);}
    .d4-talisman-ui .icons > div:nth-child(7) {width:5.5rem;height:5.5rem;}
}

.zauber-affixes .grad-left {padding: .8rem var(--v20);}
.zauber-affixes .grad-left ul {padding:0;}

/**********************/
/**********************/
/**********************/
/* 6. PARAGON         */
/**********************/
/**********************/
/**********************/

.d4-para {display:flex;gap:var(--v15);width:100%;align-items:stretch;}
.d4-para-data {width:23rem;}
.d4-para-boards {width:calc(100% - 24.5rem);}
.d4-para-data .sticky {position:sticky;top:calc(11.5rem - 1px);overflow: hidden;}

@media screen and (max-width:767px) {
    .d4-para {flex-direction:column;}
    .d4-para-data {width:100%;scroll-margin-top: calc(16.5rem - 1px);margin-top: calc(-1 * (100vw - 3rem - 1px));}
    .d4-para-boards {width:100%;}
}
@media screen and (max-width:550px) {
    .d4-para-data {top:9rem;}
    .d4-para-data {scroll-margin-top: calc(14.5rem - 1px);}
}

/************************/
/* OVERVIEW *************/
/************************/

/* ESS/FINAL SWITCH *****/
.d4-para-data .para-switch {background:var(--c09);border-top:1px solid var(--c06);padding:var(--v20);}
.d4-para-data .para-switch button.active {background:var(--c04);color:var(--c01);}
.para-switch.mobile {display:none;}

/* ESS/FINAL SWITCH MOBILE *****/
@media screen and (max-width:767px) {
    .d4-para-data .para-switch {display:none;}
    .para-switch.mobile {display:flex;position:sticky;top:calc(10rem - 1px);z-index:10;height:5rem;gap:.3rem;padding:0 1.5rem;
        margin-bottom: calc(100vw - 3rem - 1px);width:calc(100% + 3rem);margin-left:-1.5rem;border-radius:0;
        border-left:none!important;border-right:none!important;overflow-y:auto;}
    .para-switch.mobile * {display:flex;align-items:center;color:var(--c02);position:relative;height:100%;}
    .para-switch.mobile .highlight, .para-switch.mobile .active, .para-switch.mobile .active span {color:var(--c01)!important;}
    /*.para-switch.mobile .active:after {content:'';position:absolute;bottom:-1px;left:0;width:100%;height:1px;background:var(--c04);}*/
    .para-switch.mobile a svg {fill:var(--c02);width:1rem;height:1rem;transition:.2s;}
    .para-switch.mobile a.highlight svg {fill:var(--c01);}
    .para-switch.mobile a, .para-switch.mobile button {background:var(--c11);height:2.7rem;border-radius:var(--br);
        align-items:center;justify-content:center;z-index:1000;}
    .para-switch.mobile a {width: 2.6rem;}
    .para-switch.mobile button {padding:0 var(--v10)!important;}
    .para-switch.mobile a.highlight, .para-switch.mobile button.active {background:var(--c04);color:var(--c01);}
}
@media screen and (max-width:550px) {
    .para-switch.mobile {top:9rem;height:4rem;padding:0 .5rem;}
    .para-switch.mobile span {display:none;}
}

/* KNOTEN GLYPHEN LISTE */
.node-list {background:var(--c10);border-top: 1px solid var(--c06);padding: 1.8rem var(--v20);}
.node-list > div {width:100%;display:flex;flex-direction:column;gap:.3rem;}
.node-list > div:not(:last-child) {border-bottom:1px solid var(--c07);padding-bottom:var(--v10);margin-bottom:var(--v10);}
.node-list .inline {width:100%;display:block;}

@media screen and (max-width:767px) {
    .node-list {padding: 1.3rem var(--v15);}
    .node-list > div:not(:last-child) {padding-bottom:.7rem;margin-bottom:.7rem;}
}



/************************/
/* MATRIX ***************/
/************************/

.layout {background:var(--c01) url('/wp-content/uploads/d4-paragon-background.webp') center center no-repeat;
    background-size:cover;padding:var(--v20);min-height:20.1rem;width:100%;}
.matrix {gap:.6rem;position:relative;z-index:5;margin:0 auto;}
.matrix > * {background:var(--c11);border-radius:var(--br);display:flex;align-items:center;color:var(--c02);position:relative;
    justify-content:center;box-shadow: var(--bx-shadow-small);}
.matrix > a:hover {background:var(--c03);color:var(--c00);}
.matrix > a:focus {background:var(--c11);}
.matrix > .highlight {background:var(--c04)!important;color:var(--c01)!important;font-weight:bold;}
.matrix > *:empty {opacity:0;visibility:hidden;pointer-events:none;}

.d4-para-data .matrix > a {width:4rem;height:4rem;}
.mobile-layout .matrix > div {width:1.5rem;height:1.5rem;font-size:0.01rem!important;color:transparent;pointer-events:none;}



/* MATRIX CONNECTOREN ********/

.matrix > *[con-h*='true']:after, .matrix > *[con-v*='true']:before {content:'';position:absolute;
    background:var(--c04);width:.4rem;height:.4rem;border-radius:50%;z-index: 10;}
.matrix > *[con-h*='true']:after {right:-.5rem;top:50%;transform:translatey(-50%);}
.matrix > *[con-v*='true']:before {left:50%;bottom:-.5rem;transform:translatex(-50%);}

/* MATRIX REGELN ********/

/* Matrix 4. Spalte ausblenden */
.matrix[matrix-data~="ad"][matrix-data~="bd"][matrix-data~="cd"][matrix-data~="dd"][matrix-data~="ed"] {
    grid-template-columns: repeat(3, minmax(1px, 1fr));}
.matrix[matrix-data~="ad"][matrix-data~="bd"][matrix-data~="cd"][matrix-data~="dd"][matrix-data~="ed"] > *:nth-child(4n) {
    display:none;}

/* Matrix 3. Spalte ausblenden */
.matrix[matrix-data~="ac"][matrix-data~="bc"][matrix-data~="cc"][matrix-data~="dc"][matrix-data~="ec"] {
    grid-template-columns: repeat(2, minmax(1px, 1fr));}
.matrix[matrix-data~="ac"][matrix-data~="bc"][matrix-data~="cc"][matrix-data~="dc"][matrix-data~="ec"] > *:nth-child(4n + 3) {
    display:none;}

/* Matrix 2. Spalte ausblenden */
.matrix[matrix-data~="ab"][matrix-data~="bb"][matrix-data~="cb"][matrix-data~="db"][matrix-data~="eb"] {
    grid-template-columns: repeat(1, minmax(1px, 1fr));}
.matrix[matrix-data~="ab"][matrix-data~="bb"][matrix-data~="cb"][matrix-data~="db"][matrix-data~="eb"] > *:nth-child(4n + 2) {
    display:none;}

/* Matrix leere Reihen ausblenden */
.matrix[matrix-data~="ca"][matrix-data~="cb"][matrix-data~="cc"][matrix-data~="cd"] > *:nth-child(n+9),
.matrix[matrix-data~="da"][matrix-data~="db"][matrix-data~="dc"][matrix-data~="dd"] > *:nth-child(n+13),
.matrix[matrix-data~="ea"][matrix-data~="eb"][matrix-data~="ec"][matrix-data~="ed"] > *:nth-child(n+17),
.matrix > *:nth-child(n+16):before {display:none;} /* Vertikaler Dot bei letzter Reihe ausblenen */

/* Matrix Größenkorrektur */
.d4-para-data .matrix:not([matrix-data~="da"][matrix-data~="db"][matrix-data~="dc"][matrix-data~="dd"]) > * {width:3.6rem;height:3.6rem;}
.d4-para-data .matrix:not([matrix-data~="ea"][matrix-data~="eb"][matrix-data~="ec"][matrix-data~="ed"]) > * {width:3.2rem;height:3.2rem;}

/* Matrix Mobile */
@media screen and (max-width:767px) {.layout {min-height:17.2rem;}}


/************************/
/* BOARDS ***************/
/************************/

/* BOARD IMAGE */

.board {scroll-margin-top:calc(11.5rem - 1px);overflow:hidden;position:relative;}
.board .box-shadow-small-inset > img {width:100%;height:100%;display:block;}
.board .box-shadow-small-inset {aspect-ration:1/1;width:100%;}

.d4-para[state="essenziell"] .board .box-shadow-small-inset > img.final,
.d4-para[state="final"] .board .box-shadow-small-inset > img.essenziell {display:none;}

.board-data {border-bottom:1px solid var(--c06);display:flex;align-items:stretch;min-height:4.8rem;
    background:var(--c10);position:relative;}
.board-data p {display:flex;align-items:stretch;padding:0;width:100%;}
.board-data .tafel {background:var(--c09);border-right:1px solid var(--c06);width:6.8rem;padding: 0 var(--v10);justify-content:center;font-weight:bold!important;display:flex;align-items:center;}
.board-data .tafel:before {content:'Tafel';display:inline-block;padding-right:.25em;}
.board-data .nodes {width:calc(100% - 6.8rem);justify-content:flex-end;padding: 0 var(--v20);gap:1.5rem;display:flex;
    align-items:center;}

/* BOARD ARROWS */

.board .arrows span {display:block;background:var(--c10);border:1px solid var(--c06);border-radius:var(--br);
    position:absolute;z-index:5;display:flex;align-items:center;justify-content:center;box-shadow:var(--bx-shadow-small);}

.board .arrows span:nth-child(1) {width:2.8rem;height:4.8rem;padding-top:2.2rem;right:1rem;top:1rem;}
.board .arrows span:nth-child(2) {width:4.8rem;height:2.8rem;padding-right:2.2rem;right:1rem;bottom:1rem;}
.board .arrows span:nth-child(3) {width:2.8rem;height:4.8rem;padding-bottom:2.2rem;left:1rem;bottom:1rem;}
.board .arrows span:nth-child(4) {width:4.8rem;height:2.8rem;padding-left:2.2rem;left:1rem;top:1rem;}
.board .arrows span:empty {display:none;}

.board .arrows span:after {position: absolute;display:flex;align-items:center;justify-content:center;color:var(--c04);
    font-size:1.8rem!important;width:calc(2.8rem - 2px);height:calc(2.8rem - 2px);}
.board .arrows span:nth-child(1):after {content:'↑';top:0;left:0;}
.board .arrows span:nth-child(2):after {content:'→';top:0;right:0;}
.board .arrows span:nth-child(3):after {content:'↓';bottom:0;left:0;}
.board .arrows span:nth-child(4):after {content:'←';bottom:0;left:0;}

@media screen and (max-width:767px) {
    .board .arrows span:nth-child(1) {width:2.4rem;height:4.2rem;padding-top:1.8rem;right:-1px;top:-1px;}
    .board .arrows span:nth-child(2) {width:4.2rem;height:2.4rem;padding-right:1.8rem;right:-1px;bottom:-1px;}
    .board .arrows span:nth-child(3) {width:2.4rem;height:4.2rem;padding-bottom:1.8rem;left:-1px;bottom:-1px;}
    .board .arrows span:nth-child(4) {width:4.2rem;height:2.4rem;padding-left:1.8rem;left:-1px;top:-1px;}
    .board .arrows span:after {width:calc(2.4rem - 2px);height:calc(2.4rem - 2px);}
}

/* BOARD MOBILE */

@media screen and (max-width:767px) {
    .board-data .nodes {padding:0 var(--v15);gap:1rem;}
    .board {scroll-margin-top:calc(16.5rem - 1px);}
}
@media screen and (max-width:550px) {
    .board-data .nodes {flex-direction:column;align-items:flex-start;gap:0;padding:.7rem var(--v15);justify-content: center;}
    .board {scroll-margin-top:calc(14.5rem - 1px);}
}


/**********************/
/**********************/
/**********************/
/* 7. SÖLDNER         */
/**********************/
/**********************/
/**********************/

.d4-soldner {display:flex;gap:var(--v15);align-items:stretch;}
.d4-soldner-1 {width:calc(66.666% - .75rem);position:relative;overflow:hidden;background:var(--c01);padding:.2rem;}
.d4-soldner-2 {width:calc(33.333% - .75rem);position:relative;overflow:hidden;background:var(--c01);display:flex;align-items:flex-end;}
.d4-soldner-1 > *:not(.background), .d4-soldner-2 > *:not(.background) {position:relative;z-index:10;}

@media screen and (min-width:768px) {.d4-soldner-1 {padding: .2rem;}}
@media screen and (max-width:767px) {.d4-soldner {flex-direction:column;}.d4-soldner > div {width:100%;}}

/************************/
/* PRIMÄR SÖLDNER       */
/************************/

.d4-soldner-1 .selection {position:absolute;left:2rem;top:1.8rem;}
.d4-soldner-1 .selection span {display:block;}
.d4-soldner-1 .selection span.f-btn-small {margin-bottom:.3rem;}

.d4-soldner-1 .d4-tree {aspect-ratio:132/96;height:32rem;float:right;container-type: size;}
.d4-soldner-1 .d4-tree > .img-bg {pointer-events:none;}
.d4-soldner-1 .d4-tree .nodes {position:relative;z-index:5;}
.d4-soldner-1 .d4-tree .nodes > div {position:absolute;transform:translate(-50%, -50%);box-shadow: var(--bx-shadow-big);}
.d4-soldner-1 .d4-tree .nodes > .hub {width:13cqw;height:13cqw;}
.d4-soldner-1 .d4-tree .nodes > .skl {width:10cqw;height:10cqw;}
.d4-soldner-1 .d4-tree .nodes > .skl, .d4-soldner-1 .d4-tree .nodes > .skl span {border-radius: var(--br);}
.d4-soldner-1 .d4-tree .nodes > .pas {width:7cqw;height:7cqw;}
.d4-soldner-1 .d4-tree .nodes > .pas, .d4-soldner-1 .d4-tree .nodes > .pas span {border-radius:50%;}
.d4-soldner-1 .d4-tree .nodes > div img {width:100%;height:100%;}
.d4-soldner-1 .d4-tree .nodes > .skl:not(.skilled), .d4-soldner-1 .d4-tree .nodes > .pas:not(.skilled) {
    filter:grayscale(75%) brightness(65%);}
.d4-soldner-1 .d4-tree .nodes > .skilled span {display:block;background:var(--c01);
    box-shadow: 0 0 0 2px rgba(182, 170, 137, 1), 0 0 15px 2px rgba(182,170,137,.4);}

.d4-soldner-1 .d4-tree .nodes .inline > span {display:none;}
.d4-soldner-1 .d4-tree .nodes .inline > img {margin:0;display:block;}

.d4-soldner-1 .d4-tree .lines {position:absolute;width:100%;height:100%;z-index:0;pointer-events:none;}
.d4-soldner-1 .d4-tree .lines polyline {fill:none;stroke-linecap:round;stroke-linejoin:round;}
.d4-soldner-1 .d4-tree .lines polyline.skilled {stroke:var(--c04);stroke-width:.7;}

.d4-soldner-1 .background {position:absolute;left:-7rem;top:0;height:100%;pointer-events:none;}
.d4-soldner-1 .background .img-bg {/*aspect-ratio:1/1*/;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.7;
    pointer-events: none;}

_::-webkit-full-page-media, _:future, :root .d4-soldner-1 .background .img-bg {aspect-ratio:1/1;width:unset;}

.d4-soldner-1 .background:after {content:'';position:absolute;width:50%;height:100%;background:var(--c01);right:0;top:0;
    background: linear-gradient(270deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);}
.d4-soldner-1 .background:before {content:'';position:absolute;width:100%;height:15rem;background:var(--c01);bottom:0;left:0;z-index:5;
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);}

@media screen and (max-width:767px) {
    .d4-soldner-1 {padding-top:3rem;}
    .d4-soldner-1 .selection {left:1.5rem;top:1.4rem;}
    .d4-soldner-1 .d4-tree {height:auto;float:none;width:100%;max-width:48rem;margin:0 auto;}
    .d4-soldner-1 .background {left:auto;right:-13rem;top:50%;transform:translateY(-74%);max-width:50rem;width:100%;}
    .d4-soldner-1 .background .img-bg {-webkit-transform: scale(-1, 1);-moz-transform: scale(-1, 1);-o-transform: scale(-1, 1);transform: scale(-1, 1);}
    .d4-soldner-1 .background:after {left:0;right:auto;background: linear-gradient(90deg, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 100%);}
}

/************************/
/* VERSTÄRKUNG          */
/************************/

.d4-soldner-2 .selection {position:absolute;left:2rem;top:1.8rem;}
.d4-soldner-2 .selection span {display:block;}
.d4-soldner-2 .selection span.f-btn-small {margin-bottom:.3rem;}

.d4-soldner-2 .actions {width:100%;padding:0 var(--v20) var(--v20) var(--v20);display:flex;flex-direction:column;gap:var(--v30);}
.d4-soldner-2 .actions > .flx {position:relative;}
.d4-soldner-2 .actions > .flx:first-child:after {content:'';position:absolute;left:0;bottom:-1.5rem;width:100%;height:1px;
    background:var(--c06);}
.d4-soldner-2 .actions > .flx > p {padding-bottom:.3rem!important;margin:-1rem 0;line-height:var(--f-line-height-p-m)!important;}
.d4-soldner-2 .actions img {width:5.5rem;height:5.5rem;}
@media screen and (min-width:768px) {.d4-soldner-2 .actions > .flx > p span.f-btn-small {line-height:2.3rem!important;}}

.d4-soldner-2 .background {position:absolute;right:-6rem;top:-6rem;width:100%;pointer-events:none;}
.d4-soldner-2 .background .img-bg {width:100%;height:100%;object-fit:cover;object-position:center;opacity:.7;
    -webkit-transform: scale(-1, 1);-moz-transform: scale(-1, 1);-o-transform: scale(-1, 1);transform: scale(-1, 1);}
.d4-soldner-2 .background:after {content:'';position:absolute;width:10rem;height:100%;background:var(--c01);left:-1px;top:0;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);}
.d4-soldner-2 .background:before {content:'';position:absolute;width:100%;height:13rem;background:var(--c01);bottom:0;left:0;
    z-index:5;background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);}

@media screen and (max-width:767px) {
    .d4-soldner-2 .selection {left:1.5rem;top:1.4rem;}
    .d4-soldner-2 .actions {padding: 7.3rem var(--v15) var(--v15) var(--v15);gap: var(--v20);}
    .d4-soldner-2 .actions > .flx {gap:var(--v10);}
    .d4-soldner-2 .actions > .flx:first-child:before {content:'';position:absolute;left:0;top:-1.05rem;width:100%;height:1px;}
    .d4-soldner-2 .actions>.flx:first-child:after {bottom:-1.05rem;}
    .d4-soldner-2 .actions>.flx:first-child:before, .d4-soldner-2 .actions>.flx:first-child:after {
        background: linear-gradient(90deg, rgba(38, 38, 38, 1) 20%, rgba(38, 38, 38, 0) 70%);}
    .d4-soldner-2 .actions img {width:4rem;height:4rem;}
    .d4-soldner-2 .background {right:-13rem;top:50%;transform:translateY(-55%);max-width:50rem;}
    .d4-soldner-2 .background:after {background: linear-gradient(90deg, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 100%);width:16rem;}
}