Stylesheet cards responsiv

public/stylesheets/style-konzentr.css

@@ -222,10 +222,6 @@
 	background-color: #3bb3c3;
 }
 
-.card-body.gliederung > p {
-	font-size: 80%;
-}
-
 .bibelstelle.text-muted {
 	color: #505050 !important;
 }

public/stylesheets/style.css

@@ -1,11 +1,236 @@
-/*@import "alegreya-sans.css";*/
+.card.slide > .card-text, .card.slide > .card-body > h6.card-subtitle, q.bibeltext {
-
+	font-size: 1rem;
-p {
-  /*padding: 50px;*/
-  /* font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;*/
-  /*font-family: "Alegreya"
-  /*font-family: "Source Sans Pro";*/
 }
+
+.card.slide > .card-body > h5, .card.slide > h5.card-header {
+	font-size: 1.25rem;
+}
+
+.card.slide > .card-body > h6.card-title {
+	font-size: 1.1rem;
+}
+
+.card-body.gliederung {
+	padding: 0.5rem;
+}
+
+.card-body.gliederung > h5.card-title {
+	font-size: 1.0rem;
+}
+
+.card-body.gliederung > h6.card-title {
+	font-size: 0.75rem;
+	color: #343a40;
+}
+
+.card-body.gliederung > h6.card-subtitle {
+	font-size: 0.5rem;
+}
+
+ul.card-text li {
+	margin-bottom: 0.1rem !important;
+}
+
+@media(min-width: 576px) {
+	.card.slide > .card-body > .card-text, .card.slide > .card-body > h6.card-subtitle, q.bibeltext {
+		font-size: 1.1rem;
+	}
+	.card.slide > .card-body > h5, .card.slide > h5.card-header {
+		font-size: 1.35rem;
+	}
+	.card.slide > .card-body > h6.card-title {
+		font-size: 1.2rem;
+	}
+
+	.card-body.gliederung > h5.card-title {
+		font-size: 1.1rem;
+	}
+
+	.card-body.gliederung > h6.card-title {
+		font-size: 0.85rem;
+	}
+
+	.card-body.gliederung > h6.card-subtitle {
+		font-size: 0.6rem;
+	}
+
+	.card-body.gliederung > p {
+		font-size: 1.0rem;
+	}
+
+	p.bibeltextkonzentr {
+		font-size: 1.0rem;
+	}
+}
+
+@media(min-width: 768px) {
+	.card.slide > .card-body > .card-text, .card.slide > .card-body > h6.card-subtitle, q.bibeltext {
+		font-size: 1.2rem;
+	}
+	.card.slide > .card-body > h5, .card.slide > h5.card-header {
+		font-size: 1.45rem;
+	}
+	.card.slide > .card-body > h6.card-title {
+		font-size: 1.3rem;
+	}
+
+	.card-body.gliederung > h5.card-title {
+		font-size: 1.2rem;
+	}
+
+	.card-body.gliederung > h6.card-title {
+		font-size: 0.95rem;
+	}
+
+	.card-body.gliederung > h6.card-subtitle {
+		font-size: 0.7rem;
+	}
+
+	.card-body.gliederung > p {
+		font-size: 1.1rem;
+	}
+
+	p.bibeltextkonzentr {
+		font-size: 1.1rem;
+	}
+}
+
+@media(min-width: 992px)  {
+	.card.slide > .card-body > .card-text, .card.slide > .card-body > h6.card-subtitle, q.bibeltext {
+		font-size: 1.3rem;
+	}
+	.card.slide > .card-body > h5, .card.slide > h5.card-header {
+		font-size: 1.55rem;
+	}
+	.card.slide > .card-body > h6.card-title {
+		font-size: 1.4rem;
+	}
+
+	.card-body.gliederung > h5.card-title {
+		font-size: 1.3rem;
+	}
+
+	.card-body.gliederung > h6.card-title {
+		font-size: 1.05rem;
+	}
+
+	.card-body.gliederung > h6.card-subtitle {
+		font-size: 0.8rem;
+	}
+
+	.card-body.gliederung > p {
+		font-size: 1.2rem;
+	}
+
+	p.bibeltextkonzentr {
+		font-size: 1.2rem;
+	}
+
+	.mb-1 {
+		margin-bottom: 1.0rem !important;
+	}
+
+	.mb-2 {
+		margin-bottom: 1.25rem !important;
+	}
+
+	.mb-3 {
+		margin-bottom: 1.5rem !important;
+	}
+}
+
+@media(min-width: 1200px)  {
+	.card.slide > .card-body > .card-text, .card.slide > .card-body > h6.card-subtitle, q.bibeltext {
+		font-size: 1.4rem;
+	}
+	.card.slide > .card-body > h5, .card.slide > h5.card-header {
+		font-size: 1.65rem;
+	}
+	.card.slide > .card-body > h6.card-title {
+		font-size: 1.5rem;
+	}
+
+	.card-body.gliederung > h5.card-title {
+		font-size: 1.4rem;
+	}
+
+	.card-body.gliederung > h6.card-title {
+		font-size: 1.15rem;
+	}
+
+	.card-body.gliederung > h6.card-subtitle {
+		font-size: 0.9rem;
+	}
+
+	.card-body.gliederung > p {
+		font-size: 1.3rem;
+	}
+
+	ul.card-text li {
+		margin-bottom: 0.2rem !important;
+	}
+
+	p.bibeltextkonzentr {
+		font-size: 1.3rem;
+	}
+}
+
+@media(min-width: 1400px)  {
+	.card.slide > .card-body > .card-text, .card.slide > .card-body > h6.card-subtitle, q.bibeltext {
+		font-size: 1.5rem;
+	}
+	.card.slide > .card-body > h5, .card.slide > h5.card-header {
+		font-size: 1.75rem;
+	}
+	.card.slide > .card-body > h6.card-title {
+		font-size: 1.6rem;
+	}
+
+	.card-body.gliederung > h5.card-title {
+		font-size: 1.5rem;
+	}
+
+	.card-body.gliederung > h6.card-title {
+		font-size: 1.25rem;
+	}
+
+	.card-body.gliederung > h6.card-subtitle {
+		font-size: 1rem;
+	}
+
+	.card-body.gliederung > p {
+		font-size: 1.4rem;
+	}
+
+	ul.card-text li {
+		margin-bottom: 0.3rem !important;
+	}
+
+	p.bibeltextkonzentr {
+		font-size: 1.4rem;
+	}
+
+	.mb-1 {
+		margin-bottom: 1rem !important;
+	}
+
+	.mb-2 {
+		margin-bottom: 1.5rem !important;
+	}
+
+	.mb-3 {
+		margin-bottom: 2rem !important;
+	}
+}
+
+.small q.bibeltext {
+	font-size: 100%;
+}
+
+hr {
+	border-top: 2px solid rgba(108, 117, 125, 0.63);
+}
+
 .nomarginbottom {
 	margin-bottom: 0px;
 }
@@ -25,7 +250,6 @@ p {
 		"Segoe UI Emoji",
 		"Segoe UI Symbol",
 		"Noto Color Emoji";
-	//font-size: 1.2rem;
 }
 
 .serif, .card-text {
@@ -46,39 +270,10 @@ span.bibelstelle {
 }
 span.bibelstelle::after { content: ' '; }
 
-h6.card-title {
-	font-size: 1.1rem;
-}
-
 h6.bibelstelle {
 	font-size: 0.9rem;
 }
 
-.card-body.gliederung {
-	padding: 0.5rem;
-}
-
-.card-body.gliederung > h5.card-title {
-	font-size: 0.9rem;
-}
-
-.card-body.gliederung > h6.card-title {
-	font-size: 0.75rem;
-}
-
-.card-body.gliederung > h6.card-subtitle {
-	font-size: 0.6rem;
-}
-
-
-/*h2, .h2 {
-	font-size: 2.5rem;
-}
-
-h5, .h5 {
-	font-size: 1.5rem;
-}*/
-
 blockquote > p {
 	font-family: "Noto Serif",
 	-apple-system,
@@ -94,15 +289,6 @@ blockquote > p {
 	"Noto Color Emoji";
 }
 
-/*.blockquote-footer {
-	font-size: 100%;
-}*/
-
-/*.divinline {
-	display: inline;
-	padding-right: 4px;
-}*/
-
 .breadcrumb {
 	margin-bottom: 2rem;
 	background-color: #a4d0fd;
@@ -116,13 +302,6 @@ blockquote > p {
 	color: #0e4f88;
 }
 
-/*.nav-pills > .nav-item > .nav-link:not(.active) {
-	background-color: white;
-}
-.nav-pills > .nav-item > .nav-link {
-	background-color: #a4d0fb;
-}*/
-
 .pill-sub-1 {
 	padding-left: 1rem;
 	padding-right: 1rem;"