:root {
    /* Ändere 20px auf deine gewünschte Größe */
    --wp--preset--font-size--large: 28px !important;
}

.has-medium-font-size {
    
}

.wp-block-columns.tickets > .wp-block-column:nth-child(1) {
    border: 3px solid transparent; 
    border-radius: 16px;
    padding: 10px;
    background-image: linear-gradient(var(--bg-color), var(--bg-color)), 
                      linear-gradient(to left, rgba(77, 18, 18, 1), rgba(243, 1, 1, 1));
    background-origin: border-box;
    background-clip: padding-box, border-box;
} 

.wp-block-columns.tickets {
    margin-bottom: 60px;
}


.wp-block-columns.tickets > .wp-block-column:nth-child(2) {
    border:3px solid transparent; 
    border-radius: 16px;
    padding: 10px;
    background-image: linear-gradient(var(--bg-color), var(--bg-color)), 
                      linear-gradient(to left, #f7d354, #8c421d);
    background-origin: border-box;
    background-clip: padding-box, border-box;
} 

/* 1. Container vorbereiten: Wichtig für die Stapelung */
.wp-block-columns.tickets > .wp-block-column:nth-child(3) > .wp-block-cover {
    position: relative;
    /* Schneidet das Hintergrundbild des Containers selbst zu */
    clip-path: polygon(
        16px 0, calc(100% - 16px) 0, 100% 16px, 
        100% calc(100% - 36px), calc(100% - 36px) 100%, 
        16px 100%, 0 calc(100% - 16px), 0 16px
    );
    border: none !important;
    
}

.wp-block-columns.tickets > .wp-block-column:nth-child(3) > .wp-block-cover:nth-child(1) {
    margin-bottom: 10px;
}

/* 2. Der Rahmen als Overlay */
.wp-block-columns.tickets > .wp-block-column:nth-child(3) > .wp-block-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: white; 
    pointer-events: none; /* Klicks gehen durch den Rahmen durch */
    z-index: 1; /* Liegt über dem Bild, aber unter dem Text */
    
    /* Variablen für einfachere Anpassung */
    --c-s: 16px; /* Kleiner Cut */
    --c-l: 36px; /* Großer Cut */
    --b: 2px;    /* Rahmenbreite */

    /* Der Pfad zeichnet erst Außen (Uhrzeigersinn), 
       geht dann nach Innen und zeichnet Innen (Gegen-Uhrzeigersinn).
       Dadurch entsteht das "Loch".
    */
    clip-path: polygon(
        /* --- AUSSENKANTE --- */
        50% 0,
        calc(100% - var(--c-s)) 0,
        100% var(--c-s),
        100% calc(100% - var(--c-l)),
        calc(100% - var(--c-l)) 100%,
        var(--c-s) 100%,
        0 calc(100% - var(--c-s)),
        0 var(--c-s),
        var(--c-s) 0,
        50% 0,
        
        /* --- BRÜCKE NACH INNEN --- */
        50% var(--b),
        
        /* --- INNENKANTE (Gegenläufig) --- */
        var(--c-s) var(--b),
        var(--b) var(--c-s),
        var(--b) calc(100% - var(--c-s)),
        var(--c-s) calc(100% - var(--b)),
        calc(100% - var(--c-l)) calc(100% - var(--b)),
        calc(100% - var(--b)) calc(100% - var(--c-l)),
        calc(100% - var(--b)) var(--c-s),
        calc(100% - var(--c-s)) var(--b),
        50% var(--b)
    );
}

/* 3. Text/Inhalt nach vorne holen */
.wp-block-columns.tickets > .wp-block-column:nth-child(3) > .wp-block-cover .wp-block-cover__inner-container {
    position: relative;
    z-index: 2; /* Wichtig: Text muss ÜBER dem Rahmen liegen */
}

.wp-block-columns.tickets > .wp-block-column:nth-child(3) > .wp-block-cover p {
    width: 80%;
    margin: 0 auto 30px auto;
}


.red-gradient-stitch {
    position: relative; /* Wichtig als Referenz für das Pseudo-Element */
    border-radius: 12px;
    /* Padding erhöhen, damit der Inhalt innerhalb der Naht liegt (10px Abstand + 10px Luft) */
    padding: 30px; 
    background: linear-gradient(180deg, #860404 0%, rgba(77, 18, 18, 1) 100%);
    margin-top: 15px;
    /* Alten Border entfernen */
    border: none;
}

.red-gradient-stitch::after {
    content: "";
    position: absolute;
    /* 10px Abstand von allen Seiten */
    inset: 5px; 
    /* Alternativ für ältere Browser: top: 10px; left: 10px; right: 10px; bottom: 10px; */
    
    border: 2px dotted var(--bg-color); /* Deine Nahtfarbe */
    
    /* Der Radius sollte etwas kleiner sein als der äußere, damit es parallel wirkt */
    border-radius: 8px; 
    
    pointer-events: none; /* Klicks gehen durch die Naht durch */
}

.red-gradient-stitch .wp-block-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    list-style-position: inside;
    list-style-image: url("/wp-content/themes/switzerlan/images/icons/list-icon.png");
    margin-bottom: 20px;
}

.red-gradient-stitch .wp-block-list li {
    font-size: 20px;
    line-height: 2.2rem;
}

.ticket-remaining {
    line-height: 1.5rem;
}

/*h2 {
    text-transform: uppercase;
    margin-bottom: 40px;
}*/


p {
    margin-bottom: 20px;
}

.entry-content > p {
    max-width: 60%;
    margin: 0 auto 40px auto;
}
	
.wp-block-button {
    border-radius: none;
}

.wp-block-button > .wp-block-button__link {
    --cut-small: 8px;
	--cut-large: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
     border-radius: 0;
	gap: 12px;
	padding: 14px 22px;
	border: none;
	cursor: pointer;
	font-weight: 600;
	font-size: 16px;
	color: white;
	text-transform: uppercase;
	clip-path: polygon(var(--cut-small) 0,
			calc(100% - var(--cut-small)) 0,
			100% var(--cut-small),
			100% calc(100% - var(--cut-large)),
			calc(100% - var(--cut-large)) 100%,
			var(--cut-small) 100%,
			0 calc(100% - var(--cut-small)),
			0 var(--cut-small));
	transition: opacity 0.3s ease, transform 0.1s ease;
	filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
    background: linear-gradient(0deg, #000000 0%, #333333 100%);
}

.wp-block-button > .wp-block-button__link:hover {
	opacity: 0.9;
	filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.4));
}

.wp-block-button > .wp-block-button__link:active {
	transform: scale(0.98);
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}