/* ========== 1. Basis-Styles für die Box ========== */
.pb-box {
    position: relative;
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    background-color: var(--pb-background-color, #fff); /*Hintergrundfarbe der Box*/
    overflow: hidden; /* Damit das Badge über den Rand geht */
}


/* Box-Design mit Border */
.pb-box.border {
    border-style: solid;
    border-width: var(--box-border-width, 1px);
    border-color: var(--box-border-color, #ccc);
    border-radius: var(--box-border-radius, 5px);
}

/* ========== 2. Bild-Styling ========== */
.pb-image {
    width: 100%;
}

.pb-image img {
    width: 100%;
    height: 200px; /* Max. Höhe */
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ========== 3. Layout für Bildpositionen ========== */
/* 🔹 Bild oben */
.pb-layout-top {
    flex-direction: column;
}

/* 🔹 Bild unten */
.pb-layout-bottom {
    flex-direction: column;
}

/* 🔹 Bild links */
.pb-layout-left .pb-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
}

.pb-layout-left .pb-image {
    width: 40%;
}

.pb-layout-left .pb-text-container {
    width: 60%;
    padding-left: 15px;
}

/* 🔹 Bild rechts */
.pb-layout-right .pb-container {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.pb-layout-right .pb-image {
    width: 300px;
}

.pb-layout-right .pb-text-container {
    width: 60%;
    padding-right: 15px;
}

/*Bild oben ausrichten*/
.pb-box.pb-layout-top img{
    height:200px;
    width: 100%;
}

/*Bild links ausrichten*/
.pb-box.pb-layout-left.image-left{
    align-items:stretch;
}

.pb-box.pb-layout-left.image-left .pb-container,
.pb-box.pb-layout-left.image-left .pb-image-left,
.pb-box.pb-layout-left.image-left .pb-image-left img,
.pb-box.pb-layout-left.image-left,
.pb-box.pb-layout-right.image-right .pb-container,
.pb-box.pb-layout-right.image-right .pb-image-right,
.pb-box.pb-layout-right.image-right .pb-image-right img,
.pb-box.pb-layout-right.image-right{
    height:100%;
}

/*Bild rechts ausrichten*/
.pb-box.pb-layout-right{
    height:100%;
}


/* ========== 4. Textelemente ========== */
.pb-headline {
    font-size: var(--headline-size, 24px);
    color: var(--headline-color, #333);
    text-align: var(--headline-alignment, left);
    margin-bottom: 10px;
}

.pb-content {
    font-size: 16px;
    color: #666;
}

/* ========== 5. Button-Styling ========== */
.pb-button {
    margin-top: 15px;
    text-align: center;
}

.pb-btn {
    display: inline-block;
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    border: none;
    border-radius: var(--button-border-radius, 5px);
    background-color: var(--button-bg-color, #0073e6);
    color: var(--button-text-color, #fff);
}

/* Falls Border für Button aktiv ist */
.pb-btn.border {
    border-width: var(--button-border-width, 2px);
    border-style: solid;
    border-color: var(--button-border-color, #fff);
}

/* Button Paddings */
.pb-btn {
    padding-top: var(--pb-button-padding-top, 10px);
    padding-bottom: var(--pb-button-padding-bottom, 10px);
    padding-left: var(--pb-button-padding-left, 20px);
    padding-right: var(--pb-button-padding-right, 20px);
}

/* Button-Ausrichtung */
.pb-button {
    text-align: var(--pb-button-alignment, center);
}

/* ========== 6. Badge-Design ========== */
.pb-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    font-weight: bold;
    font-size: var(--badge-font-size, 14px);
    background-color: var(--badge-bg-color, #ff4d4d);
    color: var(--badge-text-color, #fff);
    border-radius: 3px;
    z-index: 10;
}

/* 🔹 Diagonal-Badge */
.pb-badge.badge-diagonal {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #CC0000;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 20px;
    transform: rotate(45deg);
    transform-origin: top right;
    white-space: nowrap;
    text-align: center;
}

/* 🔹 Gerade ausgerichteter Badge */
.badge-straight {
    transform: none;
}

.pb-button-outer{
    width:100%;
}

.pb-button-outer .pb-btn{
    text-align:center;
}
.pb-button-outer .pb-btn:hover{
   color:currentColor;
}