*{
padding: 0;
margin: 0;
box-sizing: border-box;
}


/* ============ SHOPWARE: AB HIER KOPIEREN ============ */
/* Countdown-Leiste GLOBAL auf allen Seiten, direkt unter dem Shopware-Header (Twig-Block base_header, siehe base.html.twig).
   Kein globaler Reset: alles ist auf .sg-leiste-countdown begrenzt, der Rest des Shops bleibt unberührt.
   Sticky: Die Leiste klebt beim Scrollen oben. Hat der Shopware-Header selbst sticky, den Abstand per --sg-leiste-oben-countdown setzen (z. B. 80px). */
.sg-leiste-countdown,
.sg-leiste-countdown *{
margin: 0;
padding: 0;
box-sizing: border-box;
}

.sg-leiste-countdown{
box-sizing: border-box;
position: sticky;
top: var(--sg-leiste-oben-countdown, 0px);
z-index: 100;
width: 100%;
max-width: 100%;
overflow: hidden;
min-height: 64px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px 12px;
padding: 10px 16px;
background: #D20729;
color: #FFFFFF;
font-family: "Roboto Condensed", "RobotoCond", "Arial Narrow", sans-serif;
}
.sg-leiste-countdown[data-sg-phase-countdown="presale"]{
flex-direction: column;
align-items: stretch;
text-align: center;
background: #282828;
}
.sg-leiste-countdown[data-sg-phase-countdown="presale"] .sg-text-block-countdown{
align-items: center;
}
.sg-leiste-countdown[data-sg-phase-countdown="presale"] .sg-zeit-countdown{
justify-content: center;
}
.sg-leiste-countdown[data-sg-phase-countdown="ende"]{
display: none;
}

.sg-leiste-countdown .sg-nur-desktop-countdown{
display: none;
}

/* Textblock */
.sg-leiste-countdown .sg-text-block-countdown{
min-width: 0;
display: flex;
flex-direction: column;
}
.sg-leiste-countdown .sg-text-presale-countdown,
.sg-leiste-countdown .sg-text-bgw-countdown{
display: none;
}
.sg-leiste-countdown[data-sg-phase-countdown="presale"] .sg-text-presale-countdown,
.sg-leiste-countdown[data-sg-phase-countdown="bgw"] .sg-text-bgw-countdown{
display: block;
}
.sg-leiste-countdown .sg-titel-countdown{
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
line-height: 1.2;
color: #ECECEC;
}
.sg-leiste-countdown .sg-text-bgw-countdown .sg-titel-countdown{
color: #FFFFFF;
}
.sg-leiste-countdown .sg-untertitel-countdown{
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
color: #FFFFFF;
}

/* Zeit */
.sg-leiste-countdown .sg-zeit-countdown{
min-width: 0;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px;
font-family: "Avory", "Avory I PE", "Bebas Neue", "Arial Narrow", sans-serif;
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
color: #FFFFFF;
}
.sg-leiste-countdown .sg-einheit-countdown{
display: flex;
align-items: baseline;
gap: 6px;
}
.sg-leiste-countdown .sg-einheit-countdown + .sg-trenner-countdown + .sg-einheit-countdown{
margin-left: 0;
}
.sg-leiste-countdown .sg-zeit-countdown > .sg-einheit-countdown:nth-child(3){
margin-left: 4px;
}
.sg-leiste-countdown .sg-zahl-countdown{
font-size: 24px;
font-weight: normal;
}
.sg-leiste-countdown .sg-beschriftung-countdown{
font-family: "Roboto Condensed", "RobotoCond", "Arial Narrow", sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
}
.sg-leiste-countdown .sg-trenner-countdown{
font-size: 20px;
color: #510D05;
}
.sg-leiste-countdown .sg-trenner-tage-countdown{
display: none;
}
.sg-leiste-countdown[data-sg-phase-countdown="presale"] .sg-trenner-countdown{
color: #D20729;
}
.sg-leiste-countdown[data-sg-phase-countdown="presale"] .sg-beschriftung-countdown{
color: #ECECEC;
}

/* Button (nur Phase 1) */
.sg-leiste-countdown .sg-button-countdown{
display: none;
align-items: center;
min-height: 44px;
padding: 0 14px;
border-radius: 6px;
background: #D20729;
color: #FFFFFF;
text-decoration: none;
font-size: 15px;
font-weight: 700;
}
.sg-leiste-countdown .sg-button-countdown:hover{
color: #ECECEC;
text-decoration: none;
}
.sg-leiste-countdown[data-sg-phase-countdown="presale"] .sg-button-countdown{
display: inline-flex;
justify-content: center;
text-align: center;
}

/* ab 480px: Presale-Leiste mit Button rechts */
@media (min-width: 480px){
.sg-leiste-countdown[data-sg-phase-countdown="presale"]{
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto;
column-gap: 12px;
row-gap: 4px;
align-content: center;
align-items: center;
text-align: left;
}
.sg-leiste-countdown[data-sg-phase-countdown="presale"] .sg-text-block-countdown{
align-items: flex-start;
}
.sg-leiste-countdown[data-sg-phase-countdown="presale"] .sg-zeit-countdown{
justify-content: flex-start;
}
.sg-leiste-countdown[data-sg-phase-countdown="presale"] .sg-text-block-countdown{
grid-column: 1;
grid-row: 1;
}
.sg-leiste-countdown[data-sg-phase-countdown="presale"] .sg-zeit-countdown{
grid-column: 1;
grid-row: 2;
}
.sg-leiste-countdown[data-sg-phase-countdown="presale"] .sg-button-countdown{
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
white-space: nowrap;
}
}

/* Mobil, Phase 2: Text über Zeit, zentriert */
.sg-leiste-countdown[data-sg-phase-countdown="bgw"]{
flex-direction: column;
gap: 4px;
padding: 8px 16px;
text-align: center;
}
.sg-leiste-countdown[data-sg-phase-countdown="bgw"] .sg-text-block-countdown{
align-items: center;
}

/* ============ Desktop-Leiste ============ */
@media (min-width: 768px){
.sg-leiste-countdown .sg-nur-mobil-countdown{
display: none;
}
.sg-leiste-countdown .sg-nur-desktop-countdown{
display: inline;
font-weight: normal;
}
.sg-leiste-countdown div.sg-untertitel-countdown.sg-nur-desktop-countdown{
display: block;
}

.sg-leiste-countdown,
.sg-leiste-countdown[data-sg-phase-countdown="presale"],
.sg-leiste-countdown[data-sg-phase-countdown="bgw"]{
min-height: 72px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px 32px;
padding: 12px 32px;
text-align: left;
}
.sg-leiste-countdown[data-sg-phase-countdown="bgw"] .sg-text-block-countdown{
align-items: flex-start;
}
.sg-leiste-countdown .sg-text-block-countdown{
gap: 4px;
}
.sg-leiste-countdown .sg-titel-countdown{
font-family: "Avory", "Avory I PE", "Bebas Neue", "Arial Narrow", sans-serif;
font-size: 26px;
line-height: 1;
letter-spacing: -0.02em;
color: #FFFFFF;
}
.sg-leiste-countdown .sg-untertitel-countdown{
color: #ECECEC;
}
.sg-leiste-countdown .sg-text-bgw-countdown .sg-untertitel-countdown{
color: #FFFFFF;
}

.sg-leiste-countdown .sg-zeit-countdown{
align-items: flex-start;
gap: 10px;
}
.sg-leiste-countdown .sg-einheit-countdown,
.sg-leiste-countdown .sg-einheit-countdown + .sg-trenner-countdown + .sg-einheit-countdown{
flex-direction: column;
align-items: center;
gap: 0;
min-width: 48px;
margin-left: 0;
}
.sg-leiste-countdown .sg-zeit-countdown > .sg-einheit-countdown:nth-child(3){
margin-left: 0;
}
.sg-leiste-countdown .sg-zahl-countdown{
font-size: 34px;
}
.sg-leiste-countdown .sg-beschriftung-countdown{
display: block;
font-size: 11px;
margin-top: 3px;
}
.sg-leiste-countdown .sg-trenner-countdown,
.sg-leiste-countdown .sg-trenner-tage-countdown{
display: inline;
font-size: 30px;
}

.sg-leiste-countdown .sg-button-countdown{
min-height: 46px;
padding: 0 24px;
font-size: 16px;
}
}

/* ab 1024px: volle Desktop-Abstände wie im Design */
@media (min-width: 1024px){
.sg-leiste-countdown,
.sg-leiste-countdown[data-sg-phase-countdown="presale"],
.sg-leiste-countdown[data-sg-phase-countdown="bgw"]{
flex-wrap: nowrap;
gap: 48px;
padding: 0 64px;
}
}

/* Leiste bleibt unsichtbar, bis das Skript sie unter die Breadcrumbs gesetzt hat (kein Springen) */
.sg-leiste-countdown:not([data-sg-bereit-countdown]){
display: none;
}


/* Der erste CMS-Block direkt unter der Leiste hat in Shopware oft 20px Abstand oben (inline gesetzt): hier entfernen. Nicht sichtbar, wenn die Leiste ausgeblendet ist. */
.sg-leiste-countdown:not([data-sg-phase-countdown="ende"]) + .cms-page > .cms-sections > .cms-section:first-child > section:first-child > .cms-block:first-child > .cms-block-container{
padding-top: 0 !important;
}

/* ============ SHOPWARE: BIS HIER KOPIEREN ============ */