/* Helpers */
/*
 * helpers.css
 * Version: 1.1.1 (2017)
 * by Stephan Schlegel
 * provides useful classes for common purposes
 */
audio{
	height: 2em;
}
a:active, a:focus {outline: none;}
.nowrap{
  white-space: nowrap;
}
.no-opacity {
    opacity: 0;
}

main{
  /* hyphens only in main body section */
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
.full-width{
  width: 100%;
  min-width: 100%;
  height: auto;
}

/* Custom Dschän*/

#edit-page {
	/* the edit page link that appears when page is editable */
	position: absolute;
	top: 10px;
	right: 10px
}


#offcanvas-nav .uk-search-input {
	width: 100%;
}

img.uk-comment-avatar {
	width: 60px;
	height: 60px;
}

/****************************************************************
 * Bodycopy text and images
 *
 */

.align_left {
	/* for images placed in rich text editor */
	float: left;
	margin: 0 1em 0.5em 0;
	position: relative;
	top: 0.5em;
	max-width: 50%;
}

.align_right {
	/* for images placed in rich text editor */
	float: right;
	margin: 0 0 0.5em 1em;
	max-width: 50%;
}

.align_center {
	/* for images placed in rich text editor */
	display: block;
	margin: 1em auto;
	position: relative;
	top: 0.5em;
}

/* Photoswipe Gallery */
.pwpswp-gallery{
    /* align-content: space-around; */
    /* text-align: center; */
}
.pwpswp-gallery figure {
	margin: 1em 1em;
	margin: 1%;
	/* background: dimgrey; */
	flex: 23%;
	align-content: center;
	text-align: center;
}

figure img {
	/* display: table-row; */
	/* margin-bottom: 0.5em; */
}

figure figcaption {
	/* display: table-row; */
	font-size: smaller;
	/* color: #777; */
	/* line-height: 1.4em; */
}

/*********************************************************************
 * Media queries for responsive layout
 *
 */

@media only screen and (max-width: 767px) {
	/* mobile layout */

	.align_left, .align_right, .align_center {
		display: block;
		float: none;
		margin: 1em auto;
		max-width: 100%;
	}
}

@media only screen and (max-width: 959px) {
	#masthead {
		/*padding-bottom: 20px;*/
	}


}
/* special elements */
.sticky-flags{
  top: 50%;
  right: 0;
}
.sticky-flag{
  margin: 3px 0 3px 3px;
  background: #000;
}
/* helpers */
.table{display: table;}
.table-row{display: table-row;}
.table-cell{display: table-cell;}
.box-shadow-remove{
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

/* ==========================================================================
   Stationary Bild — Bild bleibt am Desktop sticky, Text scrollt daneben durch
   (Layout-Block "stationary", orientiert am SYCK-Projekt). Struktur/Layout —
   Farben kommen aus dem aktiven Theme.
========================================================================== */
.stationary-grid{
  display: grid;
  grid-template-columns: 1fr;      /* mobil: gestapelt */
  gap: 1.5rem 2.5rem;
  --media-col: 5fr;                /* Standard: Text breiter (5 : 7) */
  --body-col: 7fr;
}
.stationary-grid.ratio-5050{ --media-col: 1fr; --body-col: 1fr; }
.stationary-grid.ratio-6040{ --media-col: 2fr; --body-col: 3fr; } /* Text 60 : Bild 40 */
.stationary-grid.ratio-4060{ --media-col: 3fr; --body-col: 2fr; } /* Text 40 : Bild 60 */
.stationary-grid.ratio-5070{ --media-col: 7fr; --body-col: 5fr; } /* Bild breiter (7 : 5) */
.stationary-media{ margin: 0; min-width: 0; }
.stationary-media img{ width: 100%; height: auto; display: block; }
.stationary-caption{ margin-top: .5rem; font-size: .85rem; color: #726C7E; }
.stationary-body > :first-child{ margin-top: 0; }

@media (min-width: 960px){
  /* Bild links (Default): Spalten = Bild | Text */
  .stationary-grid{
    grid-template-columns: minmax(0, var(--media-col)) minmax(0, var(--body-col));
    align-items: start;
    column-gap: 4.5rem;
  }
  /* Bild rechts: Spalten gespiegelt + Reihenfolge getauscht */
  .stationary-grid.media-right{
    grid-template-columns: minmax(0, var(--body-col)) minmax(0, var(--media-col));
  }
  .stationary-grid.media-right .stationary-media{ order: 2; }
  /* der eigentliche Sticky-Effekt */
  .stationary-media{ position: sticky; top: 6rem; align-self: start; }
  .stationary-body{ max-width: 36rem; }
  .stationary-grid .stationary-body{ margin-left: auto; }            /* Text rechts → an rechte Kante */
  .stationary-grid.media-right .stationary-body{ margin-left: 0; margin-right: auto; } /* Text links → an linke Kante */
}

/* ==========================================================================
   Eventliste (Layout-Block "eventlist") — Tabellenstil wie Termine.
   Desktop: 3 Spalten (Datum · Name · Ort/Zeit). Mobil: Spalten stapeln.
========================================================================== */
.events-heading{ margin: 0 0 0.75rem; }
.events-table{ margin: 0; }
.events-table td{ vertical-align: middle; padding: 0.8rem 0.75rem; }
.events-table td:first-child{ padding-left: 0; }
.events-table td:last-child{ padding-right: 0; }
.events-table .ev-date{ font-weight: 700; white-space: nowrap; color: var(--mx-ink-strong); }
.events-table .ev-name{ font-weight: 600; }
.events-table .ev-loc{ color: var(--mx-ink-soft); }
.events-table .ev-link{ color: var(--mx-teal-ink); margin-left: 0.35rem; }
.events-table .ev-link:hover{ color: var(--mx-coral-dark); }
.events-table.events-past td{ color: var(--mx-ink-soft); }

@media (max-width: 640px){
  /* jede Zeile wird ein gestapelter Block */
  .events-table, .events-table tbody, .events-table tr, .events-table td{ display: block; width: 100%; }
  .events-table tr{ padding: 0.85rem 0; border-bottom: 1px solid var(--mx-line); }
  .events-table tr:last-child{ border-bottom: 0; }
  .events-table td{ padding: 0.1rem 0 !important; border: 0 !important; }
  .events-table .ev-date{ color: var(--mx-red); font-size: 0.95rem; }
  .events-table .ev-name{ font-size: 1.1rem; }
}