/* Überschreiben */
.col-md-6 {
    flex: 0 0 48%;
    max-width: 48%;
}

.tile-box-6 {
    margin:1%;
    border-radius: 5px;
    padding:20px;
}
.tile-0 {
    background-color: #ffffff;
}
.tile-1 {
    background-color: #ececec;
}
.tile-2 {
    background-color: #F8ECE0;
}
.tile-3 {
    background-color: #f2a20e;
}

/* Basis Tabelle auf der Unterstützer-Seite */
.tablesupporter {
    width: 100%;
}
.tablesupporter,
.tablesupporter td,
.tablesupporter th {
    __border-width:0;
    __border-color: #000000;
    padding-left: 20px;
    padding-right: 20px;
    margin: 20px;
    background-color:#ffffff;
}

/* Tabelle auf der Unterstützerseite für die gesuchten Spenden */
.tablesupporter .tablesupportitems {
    width:100%;
}
.tablesupporter .tablesupportitems th {
    border-bottom:2px solid black;
    margin-bottom:10px;
    margin-left:5px;
}
.tablesupporter .tablesupportitems,
.tablesupporter .tablesupportitems tr,
.tablesupporter .tablesupportitems th,
.tablesupporter .tablesupportitems td {
    __border-width: 0;
    __border-color: #000000;
    background-color:#faf9ea;
    padding:10px;
    margin: 10px;
}

.width-33 {
    width: 33%;
}
.width-30 {
    width: 30%;
}
.width-50 {
    width: 50%;
}
.width-100 {
    width: 100%;
}
.width-200px {
    width: 200px;
}
.height-200px {
    height: 200px;
}
.height-255px {
    height: 255px;
}
.height-400px {
    height: 400px;
}

/* verhindert, dass die Menüpunkte in der Navigation umgebrochen werden */
.mainlink {
    text-overflow: ellipsis;
    text-wrap-mode: nowrap;
    white-space: nowrap;
}

/* workshop tile in page workshops
   list on detail accordion
   list without accordion
*/
.accordion-wrapper div article ul li,
.card-body  ul li {
     font-size: 0.8em;
}

/* Farbe des Indikator Buttons im Slider; ansonsten weiß auf weiß */
article .markdown .carousel .carousel-indicators button {
    background-color: gray;
}


.image-container-1x1 {
    width: 100%; /* Nimmt die volle Breite des Eltern-Elements ein */
    position: relative; /* Wichtig für die absolute Positionierung des Bildes */
    /* Der 'Padding-Hack' für 1:1 (quadratisch): 100% der Breite */
    padding-top: 100%; 
    overflow: hidden; /* Verhindert, dass das Bild über den Container hinausragt */
}

/* Stil für das Bild innerhalb des Containers */
.image-container-1x1 img {
    position: absolute; /* Positioniert das Bild relativ zum Container */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Wichtig: Skaliert und schneidet das Bild, um den 1:1-Bereich auszufüllen */
    object-fit: cover; 
}



/* entfernt den obersten Rand */
body.removeheader .wrapper .site-content .page.section-modular {
    margin-top: 0 !important;
}

body.removeheader .wrapper {
    background-color: #f2a20e;
}

/* 2nd level menü */
header.site-header div.header-inner ul li ul.nav-lvl2 li a {
    line-height: 40px !important;
}

/* 
    Höhe des Bildes im Header 
   die kann nicht beliebig klein werden, da noch ein H1 Header reinkommt, der uU umgebrochen wird (zB Fahrradwerkstatt) 
*/
.screen-image.screen-top {
    height: 255px !important;
}

/*
    HTML5 Akkordion Formatierung:
    wenn ausgeklappt wird die summary fett dargestellt und ein zusätzlicher Abstand oben und unten eingefügt
*/
details[open] {
  padding-top: 10px;
  padding-bottom: 10px;
}
details[open] summary {
  font-weight: bold;
}


/*
    Störer in der Workshop Card
*/
.overlay-text {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    color: #fff;
    font-weight: bold;
    font-size: 2.2rem;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 10;
    white-space: nowrap; /* Verhindert ungewollte Zeilenumbrüche */

    /* 1. Die schwarze Umrandung (Kontur) */
    -webkit-text-stroke: 1px red;

    /* 2. Der Leuchteffekt kombiniert mit einem dunklen Schatten für Tiefe */
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 0.4), /* Dezentes rest-leuchten */
        0 0 15px rgba(255, 0, 0, 1),         /* Kernschatten (fast 100% schwarz) */
        0 0 30px rgba(255, 0, 0, 0.9),       /* Breite dunkle Aura */
        0 0 50px rgba(255, 0, 0, 0.8);       /* Weicher, sehr dunkler Auslauf */
}


img.float-left {display:inline; float:left; margin:5px 15px 5px 0; max-width: 47%;}
img.float-right {float:right; margin:5px 0 5px 15px; max-width: 47%;}



blockquote {
  border-left: 10px solid #ccc;
  margin: 1em 10px;
  padding: 0.5em 10px;
  color: black! important;
}

blockquote cite {
    font-size: 14px;
    display: block;
    margin-top: 5px;
}

blockquote cite:before {
    content: "\2014 \2009";
}