/* CSS code for the scratched label box. This is primarily used in the blog for info boxes and the
    ratgeber / anleitung label. */


.tg_scratched_label_box {
    display: flex; /* Setzt alle Elemente in einer Reihe */
    align-items: stretch; /* Alle Elemente erhalten die gleiche Höhe */
    color: white;
}

.tg_scratched_box_content {
    display: flex;
    align-items: center;
}

.tg_scratched_box_content:has(div) {
    padding: 0px;
}

.tg_scratched_box_content:has(h3) {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

.tg_scratched_box_left, .tg_scratched_box_right {
    width: 10px; /* Breite der Scratch-Grafiken */
    height: auto;
}

.tg_scratched_box_left {
    mask-image: url('https://tegards.com/wp-content/uploads/2025/01/pencil-scratch-links.svg');
    -webkit-mask-image: url('https://tegards.com/wp-content/uploads/2025/01/pencil-scratch-links.svg');
    mask-size: auto 100%;
    mask-repeat: no-repeat;
    mask-position: left;
}

.tg_scratched_box_right {
    mask-image: url('https://tegards.com/wp-content/uploads/2025/01/pencil-scratch-rechts.svg');
    -webkit-mask-image: url('https://tegards.com/wp-content/uploads/2025/01/pencil-scratch-rechts.svg');
    mask-size: auto 100%;
    mask-repeat: no-repeat;
    mask-position: right;
}

.tg_scratched_label_box > .tg_scratched_box_content > div.wpb_single_image {
    margin-top: -3px;
    margin-bottom: 0px;
    margin-right: 10px;
    margin-left: 0px;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.tg_scratched_label_box > .tg_scratched_box_content > h3 {
    margin: 0px;
    color: white;
}

/* style blog archive page / related blog post element (the scratched labels) */
.tg-blog-post-type-label {
    position: absolute;
    z-index: 10;
    margin-top: 10px;
    margin-left: 2px;
}