/* -----------------------------------------

	      Custom styles 
	     
              flexgrid site          
           template cassiopeia

--------------------------------------------
letzte Anpassungen: 20.10.2025
----------------------------------------- */

/* ---------- Strukturänderungen --------
.sheet { margin: 8px auto !important; }
.post { padding: 0 !important; }
.article { margin: 1.25em !important; }
*/

/* ----------- Intro 4 Column ----------- */
/* -----------------------------------------
Classes: intro
	 xrow
	 xcol
	 einzel
	 figure
	 figcaption
----------------------------------------- */
/* -----------------------------------------
Quelle: https://www.w3schools.com/howto/howto_js_image_grid.asp
----------------------------------------- */

.intro { 
/* 	margin: -1.25em !important; */
	margin: -0.75em -2em !important; 			/* Änderung mcs 18.10.2025 */
}						

.xrow {
	display: flex;
	flex-wrap: wrap;
	padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.xcol {
	flex: 25%;
	max-width: 25%;
	padding: 0 4px;
}

.xcol img {
	margin-top: 2px;					/* Änderung mcs 20.10.2025 */
	vertical-align: middle;
	max-width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .xcol {
	flex: 50%;
	max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .xcol {
	flex: 100%;
	max-width: 100%;
  }
}

figure,
figure {
  margin:0;
}

/* 	figure h1, h2, h3, h4, h5, h6 { color: #4E6883; }*/	/* obsolete */

h3,
figure.einzel {
	overflow: hidden;					/* Änderung */
	position: relative;
	display: inline-block;
/*	width: 35%; */	
}

figure img {
	width: 100%;
	display: block;
}

figcaption {
	position: absolute;
	bottom: -4em;
	width: 100%;
	font-size: 1.2em; 
	text-align: center;
	line-height: 3em;
	white-space: nowrap;					/* ACHTUNG: kein Umbruch der Titel */
	color: white;
	background: rgba(0, 0, 0, 0);
	-webkit-transition: all 1s ease;
	transition: all 1s ease;
}
 
figure.mitte figcaption {
	width: 0;
	bottom: 50%;
	left: 50%;
	overflow: hidden;
}

figure.rechts figcaption {
	width: 0;
	left: 50%;
}

figure:focus figcaption,
figure:hover figcaption {
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgba(0, 0, 0, 0.5);
}

/* ---------- im Beitrag selbst --------- */

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
	font-weight:var(--cassiopeia-font-weight-headings,500);
	color: #4E6883 !important;
}

/*
.h2 { font-size:26px; }
.h4 { font-size:22px; }
.h5 { font-size:18px; }
*/

.h2 { font-size: 1.625rem; }					/* Änderung mcs 18.10.2025 */
.h4 { font-size: 1.375rem; }					/* Änderung mcs 18.10.2025 */
.h5 { font-size: 1.125rem; }					/* Änderung mcs 18.10.2025 */

/* -----------------------------------------
Quelle: https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Bilder_mit_Bildunterschriften
----------------------------------------- */

/* -------- Flexbox horiz. vert. -------- */
/* -----------------------------------------
Classes: wall 
   	 wall-tile
	 wall-tile--h
	 wall-tile--v
//	 einzel
//	 figure
//	 figcaption
----------------------------------------- */
/* -----------------------------------------
Quelle: http://w3bits.com/flexbox-masonry/
----------------------------------------- */

.wall {
	display: flex;
/*	margin: -1.25em !important; */				/* Änderung mcs */
	margin: -0.5em -2em !important;				/* Änderung mcs 18.10.2025 */
}

.wall--h {
	flex-flow: row wrap;
/*	width: 101.75% !important; */				/* Änderung mcs */
	width: 103% !important;					/* Änderung mcs 18.10.2025 */
}

.wall--v {
	flex-flow: column wrap;
	width: 103% !important;					/* Änderung mcs 18.10.2025 */
/*	max-height: 2960px;	*/				/* ACHTUNG: muss je nach Anzahl der Bilder angepasst werden */
	max-height: 2960px;					/* Änderung mcs 18.10.2025 */
}

.wall--h,
.wall--v {
	counter-reset: brick;					/* counter */
}

.wall-tile {
	overflow: hidden;
	margin: 0 0 8px 8px;  /* Some Gutter */
	color: white;						/* counter */
	position: relative;					/* counter */
}

.wall-tile:after {
	position: absolute;					/* counter */
	top: 50%;						/* counter */
	left: 50%;						/* counter */
	z-index: 5000;						/* counter */
	transform: translate(-50%, -50%);			/* counter */
	counter-increment: brick;				/* counter */
	content: counter(brick);				/* counter */
	transition: font-size .25s, opacity .25s ease-in-out;	/* counter */
	font-weight: 700;					/* counter */
	font-size: 1.25em;					/* counter */
}

.wall-tile--h {
	flex: auto;
	height: 250px;
	min-width: 150px;
}

.wall-tile--v {
/*	width: 33.9%; */
	width: 24.5%;						/* ACHTUNG: muss angepasst werden */
}

/* wirkt sich nur auf horizontal aus */
.wall-img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/* ------------- Flextest 2 ------------- */
/* -----------------------------------------

Classes: outer
	 inner
	 image (art_image1)
	 title
	 text
	 btn (btn-sm btn_secondary)
----------------------------------------- */

/* ------------------- Start of flexbox definition ----------------------------- */

.outer {
	display: flex;
	flex-flow: row wrap;
	width: 60%;						/* set width of container */
	margin: 0 auto;						/* center container */
	height: 100%;
	min-height: 100%;
}

.inner {
	display: flex;
	flex-direction: column;
	flex: 25%;						/* set width of card (container) */
	border: 1px solid black;
	border-radius: 5px;
	margin: 24px;
	justify-content: center;
	height: 25em;
}

.item {
	border: 1px solid black;
	margin: 20px;
}

.inner img {
	display: block;						/* wichtig für die Zentrierung */
	margin: 1em auto !important;
	max-height: 100px;					/* set maximum width of image */
}

.image {
	display: block;						/* wichtig für die Zentrierung */
	margin: 1em auto !important;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	height: 100px;						/* set maximum width of image */
	width: 150px;
}

.title {
	padding: 1em .5em .3em;
	text-align: center;
	font-weight: bold;
}

.text {
	flex: 1;						/* nimmt den restlichen verfügbaren Platz */
	hyphens: auto; 
        text-align: justify;
        line-height: 120% !important;
	padding: .5em;
/*	overflow: hidden; */					/* Änderung mcs 20.10.2025 */
	overflow: scroll;					
}

.btn {
	margin: 1em auto !important;
	padding: .5em;
}

.art_image1 { background-image: url("../img/computer.jpg"); }
.art_image2 { background-image: url("../img/no-image.png"); }
.art_image3 { background-image: url("../img/printer1.jpg"); }
.art_image4 { background-image: url("../img/printer2.jpg"); }
.art_image5 { background-image: url("../img/computer.jpg"); }
.art_image6 { background-image: url("../img/no-image.png"); }
.art_image7 { background-image: url("../img/computer.jpg"); }
.art_image8 { background-image: url("../img/no-image.png"); }
.art_image9 { background-image: url("../img/computer.jpg"); }

/* -------------------- End of flexbox definition ------------------------------ */








/* -----------------------------------------
Quelle: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
----------------------------------------- */

/* ----- Smartphones (portrait and landscape) ----- */
@media only screen 
and (min-width : 320px) 
and (max-width : 480px) {
/* Styles */
}

/* ----------- Smartphones (landscape) ------------ */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* ------------ Smartphones (portrait) ------------ */
@media only screen 
and (max-width : 320px) {
	.inner {
		flex: 80%;					/* set width of card (container) */
	}
}

/* -------- iPads (portrait and landscape) -------- */
@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) {
/* Styles */
}

/* -------------- iPads (landscape) --------------- */
@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* -------------- iPads (portrait) ---------------- */
@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) 
and (orientation : portrait) {
	.inner {
		flex: 40%;					/* set width of card (container) */
	}
}

/* ------------- Desktops and laptops ------------- */
@media only screen 
and (min-width : 1224px) {
	.outer {
		width: 80%;					/* set width of container */
	}
}

/* ---------------- Large screens ----------------- */
@media only screen 
and (min-width : 1824px) {
	.outer {
		width: 60%;					/* set width of container */
	}
}

/* ------------------- iPhone 4 ------------------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}