/**
* --------------
* Basis-CMS [ci]
* --------------
*
* CSS-Datei
* css/style.css
*
*
* Thomas Römer
* Last Edited: 27 Jun 2023 04:59PM
*
* Description:
* Zentrale CSS-Datei
*
* IzKuMP
*
*/
@import url("_bootstrap-xxl.min.css");
@import url("_fonts.css");
@import url("_materialdesignicons.min.css");
/*_____________________________________________
| |
| GENERAL |
|____________________________________________|
*/
:root {
--izkump_blau: #26CBD4;
--izkump_dunkelblau: #00ADB6;
--izkump_gruen: #ACDD07;
--izkump_dunkelgruen: #91BD00;
--izkump_gelb: #FFE024;
--izkump_hellgrau: #F2F2F2;
--izkump_mittelgrau: #DBDBDB;
--izkump_dunkelgrau: #BBBBBB;
}
html {
font-size: 16px;
}
body {
font-family: "Ubuntu", "Arial", sans-serif;
line-height: 1.5;
background-color: #fff;
color: #000;
font-weight: 300;
}
@media (min-width: 992px) {
body {
font-size: 1.2rem;
}
}
strong {
font-weight: 500;
}
em {
font-style: italic;
}
a {
color: var(--izkump_dunkelblau);
transition: all 0.3s;
text-decoration: underline;
}
body.gruen a {
color: var(--izkump_dunkelgruen);
}
a:hover,
a:active,
a:focus {
color: #000;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
margin-bottom: 0;
margin-top: 2em;
font-weight: 300;
line-height: 1.3;
display: table;
}
h1, .h1 {
margin-bottom: 1em;
text-align: center;
display: block;
}
h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.7rem; }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.3rem; }
h5, .h5 { font-size: 1.2rem; }
h6, .h6 { font-size: 1.1rem; }
h1:after, .h1:after {
display: block;
content: '';
border-top: 2px solid var(--izkump_blau);
margin: .7em auto 1.5em auto;
width: 50%;
}
body.gruen h1:after, body.gruen .h1:after {
border-top: 2px solid var(--izkump_gruen);
}
h2:after, .h2:after,
h3:after, .h3:after,
h4:after, .h4:after,
h5:after, .h5:after,
h6:after, .h6:after {
display: block;
content: '';
border-top: 2px solid var(--izkump_blau);
margin: .5em auto 1em auto;
width: 100%;
}
body.gruen h2:after, body.gruen .h2:after,
body.gruen h3:after, body.gruen .h3:after,
body.gruen h4:after, body.gruen .h4:after,
body.gruen h5:after, body.gruen .h5:after,
body.gruen h6:after, body.gruen .h6:after {
border-top: 2px solid var(--izkump_gruen);
}
@media (min-width: 992px) {
h1, .h1 { font-size: 2.5rem; }
h2, .h2 { font-size: 2.1rem; }
h3, .h3 { font-size: 1.8rem; }
h4, .h4 { font-size: 1.6rem; }
h5, .h5 { font-size: 1.4rem; }
h6, .h6 { font-size: 1.2rem; }
h1:after, .h1:after {
border-top: 3px solid var(--izkump_blau);
}
body.gruen h1:after, body.gruen .h1:after {
border-top: 3px solid var(--izkump_gruen);
}
h2:after, .h2:after,
h3:after, .h3:after,
h4:after, .h4:after,
h5:after, .h5:after,
h6:after, .h6:after {
border-top: 2px solid var(--izkump_blau);
}
body.gruen h2:after, body.gruen .h2:after,
body.gruen h3:after, body.gruen .h3:after,
body.gruen h4:after, body.gruen .h4:after,
body.gruen h5:after, body.gruen .h5:after,
body.gruen h6:after, body.gruen .h6:after {
border-top: 2px solid var(--izkump_gruen);
}
}
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
margin-top: 0;
}
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child {
margin-bottom: 0;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
text-decoration: none;
color: #000;
}
h1 a:hover, h1 a:active, h1 a:focus,
h2 a:hover, h2 a:active, h2 a:focus,
h3 a:hover, h3 a:active, h3 a:focus,
h4 a:hover, h4 a:active, h4 a:focus,
h5 a:hover, h5 a:active, h5 a:focus,
h6 a:hover, h6 a:active, h6 a:focus {
text-decoration: none;
color: #000;
}
ul {
list-style-type: square;
padding-left: 25px;
}
li {
margin-bottom: 0.5em;
}
p:last-child,
ul:last-child,
li:last-child {
margin-bottom: 0;
}
p + .clearfix:last-child {
margin-top: -1rem;
}
li + .clearfix:last-child {
margin-top: -0.5rem;
}
hr {
border-top: 1px solid #000;
margin: 2rem 0;
}
small,
.small {
font-size: 80%;
font-weight: inherit;
}
.big {
font-size: 120%
}
.huge {
font-size: 150%
}
.tiny {
font-size: 70%;
font-weight: 400;
}
@media (max-width: 767.98px) {
.text-cols {
column-count: 1 !important;
}
}
@media (min-width: 768px) {
.auto-cols {
column-count: 2;
column-gap: 40px;
}
}
@media (min-width: 1199px) {
.auto-cols {
column-count: 3;
column-gap: 40px;
}
}
/*_____________________________________________
| |
| PAGE STRUCTURE |
|____________________________________________|
*/
/*---------------------------------------------
* Mobile menu
*---------------------------------------------
*/
body > .mmenu-dark {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100000;
background: rgba(0, 0, 0, .8);
}
body > nav.mmenu {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 80px 15px 15px 15px;
z-index: 100001;
overflow: hidden;
background: #fff;
font-weight: 400;
}
body > nav.mmenu > button#menu-switch-off {
position: absolute;
top: 15px;
right: 25px;
display: block;
border: none;
color: #000;
background: transparent;
line-height: 1;
text-align: center;
padding: 0;
border-radius: 4px;
outline: none;
}
body > nav.mmenu > button#menu-switch-off span {
display: none;
}
body > nav.mmenu > button#menu-switch-off svg.icon {
fill: #000;
width: 30px;
height: 30px;
opacity: 1;
}
body > nav.mmenu > button#menu-switch-off:hover,
body > nav.mmenu > button#menu-switch-off:active,
body > nav.mmenu > button#menu-switch-off:focus {
background: #000;
}
body > nav.mmenu > button#menu-switch-off:hover svg.icon,
body > nav.mmenu > button#menu-switch-off:active svg.icon,
body > nav.mmenu > button#menu-switch-off:focus svg.icon {
fill: #fff;
}
body > nav.mmenu ul {
height: 100%;
list-style: none;
padding: 0;
margin: 0;
}
body > nav.mmenu > ul {
overflow: auto;
}
body > nav.mmenu ul > li {
margin: 0;
padding: 0;
border-top: 1px solid #000;
}
body > nav.mmenu ul > li > .link-wrap {
display: table;
width: 100%;
}
body > nav.mmenu ul > li > .link-wrap > .open-sub {
display: table-cell;
width: 50px;
text-align: center;
vertical-align: middle;
font-size: 20px;
height: 36px;
cursor: pointer;
color: #333333;
}
body > nav.mmenu a {
color: #000;
outline: none;
}
body > nav.mmenu ul > li > .link-wrap > a {
display: table-cell;
font-size: 1.1rem;
text-decoration: none;
height: 36px;
padding: 10px;
vertical-align: middle;
}
body > nav.mmenu ul > li > .link-wrap > a:hover,
body > nav.mmenu ul > li > .link-wrap > a:active,
body > nav.mmenu ul > li > .link-wrap > a:focus {
background: #eee;
}
body > nav.mmenu ul > li.active,
body > nav.mmenu ul > li.active > .link-wrap > a {
color: var(--izkump_dunkelblau);
}
/* 2./3. Ebene */
body > nav.mmenu ul ul {
display: none;
}
body > nav.mmenu ul li.opened > ul {
display: block;
}
body > nav.mmenu ul ul > li {
padding-left: 1rem;
border: none;
}
body > nav.mmenu ul ul > li > .link-wrap > a {
font-weight: normal;
line-height: 1.2;
text-decoration: none;
padding: 0px 10px;
}
@media (min-width: 450px) {
body > nav.mmenu {
right: auto;
width: 450px;
}
}
@media (max-width: 1199.98px) {
body.freeze {
overflow: hidden;
}
}
@media (min-width: 1200px) {
body > nav.mmenu,
body > .mmenu-dark {
display: none !important;
}
}
/*---------------------------------------------
* Header
*---------------------------------------------
*/
header {
position: relative;
max-width: 1920px;
margin: 0 auto;
}
header #topbar {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 86px;
}
header #menu-switch {
width: 60px;
height: 50px;
}
header #menu-switch a {
display: block;
padding: 0 5px;
border-radius: 4px;
}
header #menu-switch a:hover,
header #menu-switch a:active,
header #menu-switch a:focus {
background: #000;
}
header #menu-switch svg.menu {
width: 50px;
height: 50px;
transition: all 0.2s;
}
header #menu-switch a:hover svg.menu,
header #menu-switch a:active svg.menu,
header #menu-switch a:focus svg.menu {
fill: #fff;
}
header #menu-switch span span {
display: none;
}
header > .container > hr {
margin: 0;
border-top: 2px solid #000;
}
header #topbar nav {
display: none;
}
header #topbar .logo {
flex-basis: 280px;
flex-shrink: 0;
}
header #topbar .logo > img {
width: 280px;
height: auto;
}
@media (max-width: 575.98px) {
header #topbar .logo {
flex-shrink: 1;
order: 1;
}
header #topbar .logo > img {
max-width: 90%;
}
header #menu-switch {
order: 2;
}
}
@media (min-width: 768px) {
header #topbar .logo {
padding-right: 15px;
}
}
@media (min-width: 1200px) {
header #menu-switch {
display: none;
}
header #topbar {
min-height: 130px;
}
header #topbar nav {
display: block;
margin-top: 40px;
flex-shrink: 1;
}
header #topbar nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
}
header #topbar nav ul li {
position: relative;
font-weight: 400;
margin-right: 10px;
font-size: 1.15rem;
}
/*body.homepage header #topbar nav ul li.homelink {
display: none;
}*/
header #topbar nav ul li a {
position: relative;
display: block;
color: #000;
text-decoration: none;
padding: 5px 10px;
border: 1px solid #fff;
outline: none;
}
header #topbar nav > ul > li > a {
white-space: nowrap;
/*background: #fff;*/
}
header #topbar nav > ul > li:hover > a,
header #topbar nav > ul > li > a:hover,
header #topbar nav > ul > li > a:active,
header #topbar nav > ul > li > a:focus {
border: 1px solid #000;
background: #fff;
}
header #topbar nav > ul > li.bm-has-sub > a:hover,
header #topbar nav > ul > li.bm-has-sub > a:active,
header #topbar nav > ul > li.bm-has-sub > a:focus {
background: #eee;
}
header #topbar nav > ul > li:focus-within > a { /* focus-within defined separately, because IE doesn't know it */
border: 1px solid #000;
}
header #topbar nav > ul > li.active > a {
border: 1px solid #000;
background: #fff;
}
header #topbar nav > ul > li.subactive > a {
border: 1px solid #000;
background: #eee;
}
/* Level 2 */
header #topbar nav ul ul {
visibility: hidden;
z-index: 40;
position: absolute;
left: 0;
min-width: 200px;
max-width: 275px;
list-style: none;
margin-top: -1px;
padding: 0;
opacity: 0;
display: flex;
transition: all 0.3s;
}
header #topbar nav ul > li:hover > ul {
visibility: visible;
opacity: 1;
}
header #topbar nav ul > li:focus-within > ul { /* focus-within defined separately, because IE doesn't know it */
visibility: visible;
opacity: 1;
}
header #topbar nav ul ul li {
margin: 0;
}
header #topbar nav ul ul li + li {
margin: -1px 0 0 0;
}
header #topbar nav ul ul li > a {
border: 1px solid #000;
display: block;
font-weight: normal;
font-size: 0.9em;
line-height: 1.4;
width: 100%;
background: #fff;
}
header #topbar nav ul ul li:hover > a,
header #topbar nav ul ul li > a:hover,
header #topbar nav ul ul li > a:active,
header #topbar nav ul ul li > a:focus {
background: #eee;
}
header #topbar nav ul ul li.active > a,
header #topbar nav ul ul li.subactive > a {
background: #eee;
}
header #topbar .logo {
padding-right: 30px;
}
header #topbar .logo > img {
width: 300px;
}
}
@media (min-width: 1400px) {
header #topbar {
min-height: 150px;
}
header #topbar nav {
margin-top: 40px;
}
header #topbar nav ul li {
margin-right: 20px;
font-size: 1.2rem;
}
header #topbar nav ul li a {
padding: 7px 10px;
}
header #topbar .logo > img {
width: 380px;
}
}
/*---------------------------------------------
* Content Section
*---------------------------------------------
*/
section#content {
/*max-width: 1920px;
margin: 0 auto;*/
outline: none;
min-height: 450px;
border-bottom: 1px solid transparent; /* fixes a margin problem */
}
body.datenschutz h1 {
hyphens: auto;
}
@media (min-width: 768px) {
section#content {
min-height: 720px;
}
}
/*---------------------------------------------
* Footer
*---------------------------------------------
*/
body > footer {
background: #000;
padding: 30px;
}
body > footer > .container {
color: #fff;
font-size: 1rem;
font-weight: 400;
}
body > footer .footer-logo img {
width: auto;
height: 90px;
margin: -75px 0 20px 0;
}
body > footer a,
body.gruen > footer a {
text-decoration: none;
color: #fff;
}
body > footer a:hover,
body > footer a:active,
body > footer a:focus {
color: #fff;
text-decoration: underline;
}
body > footer nav ul {
list-style: none;
margin: 0;
padding: 0;
}
body > footer nav ul li {
display: inline;
}
body > footer nav ul li:not(:last-child):after {
content: '\00A0\00A0·\00A0\00A0';
}
@media (min-width: 992px) {
body > footer .footer-logo img {
margin: -75px 0 0 0;
}
}
/*_____________________________________________
| |
| FORMULARE/BUTTONS |
|____________________________________________|
*/
.btn {
text-decoration: none;
border-radius: 6px;
border: none;
font-weight: 400;
color: #fff !important;
}
.btn:hover,
.btn:active,
.btn:focus {
background-color: #666;
}
.btn-primary {
background-color: #000;
}
.btn-secondary {
background-color: #999;
}
.btn-info {
background-color: var(--izkump_dunkelblau);
}
.btn-success {
background-color: var(--izkump_dunkelgruen);
}
.custom-checkbox .custom-control-label {
font-weight: 500;
}
.custom-checkbox .custom-control-label::before {
margin-top: 2px;
border-radius: 0;
background-color: transparent;
box-shadow: none !important;
border: 2px solid #000;
}
.custom-checkbox .custom-control-label::after {
margin-top: 2px;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
background-color: #000;
border: 2px solid #000;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23ffffff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e")
}
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
background-color: #000;
opacity: .5;
}
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23ffffff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e")
}
/*_____________________________________________
| |
| MELDUNGEN / ALERTS |
|____________________________________________|
*/
.alert-success {
background: #00A000;
border: none;
}
.alert-danger {
background: #dc3545;
border: none;
}
.alert-success,
.alert-danger,
.alert-success p,
.alert-danger p {
color: #fff !important;
}
/*_____________________________________________
| |
| COOKIE-INFO |
|____________________________________________|
*/
#cookie-info {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 100000;
overflow: auto;
}
#cookie-info > div {
background: white;
padding: 20px;
width: calc(100% - 20px);
margin: 10px;
box-shadow: 0 0 50px #000;
text-align: left;
color: #000;
}
#cookie-info h2 {
margin-top: 0;
}
#cookie-info .panel {
background: #f0f0ee;
padding: 10px 15px;
margin-bottom: 15px;
}
#cookie-info label {
font-weight: normal;
color: #000;
}
@media (min-width: 768px) {
#cookie-info {
display: flex;
justify-content: center;
align-items: center;
}
#cookie-info > div {
padding: 30px;
width: 75%;
}
}
@media (min-width: 992px) {
#cookie-info > div {
max-width: 730px;
}
}
/*_____________________________________________
| |
| ANHÄNGE |
|____________________________________________|
*/
.attachments > *:first-child {
padding-top: 20px;
}
h2.h2-att {
display: block;
font-size: 1.4rem;
padding-bottom: .3em;
border-bottom: 1px solid var(--izkump_blau);
}
body.gruen h2.h2-att {
border-bottom: 1px solid var(--izkump_gruen);
}
h2.h2-att:after {
border: none !important;
margin: 0 !important;
}
/*_____________________________________________
| |
| GALERIE |
|____________________________________________|
*/
ul.gallery {
list-style: none;
padding-left: 0;
margin: 0;
display:flex;
flex-wrap: wrap;
}
ul.gallery.blog-galerie,
ul.gallery.person-galerie,
ul.gallery.termin-galerie {
margin: 30px 0;
}
ul.gallery::before,
ul.gallery::after {
display: block;
clear: both;
content: "";
}
ul.gallery li {
float: left;
width: calc((100% - 15px) / 2);
margin-right: 15px;
margin-bottom: 15px;
}
ul.gallery li img {
width: 100%;
}
@media (max-width: 767.98px) {
ul.gallery li:nth-child(2n) {
margin-right: 0;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
ul.gallery li {
float: left;
width: calc((100% - 30px) / 3);
margin-right: 15px;
}
ul.gallery li:nth-child(3n) {
margin-right: 0;
}
}
@media (min-width: 992px) {
ul.gallery li {
float: left;
width: calc((100% - 45px) / 4);
margin-right: 15px;
}
ul.gallery li:nth-child(4n) {
margin-right: 0;
}
}
/*_____________________________________________
| |
| DOWNLOADS |
|____________________________________________|
*/
ul.filelist {
list-style: none;
padding: 0;
margin: 0 0 30px 0;
font-size: 1rem;
width: 100%;
}
ul.filelist::before,
ul.filelist::after {
display: block;
clear: both;
content: "";
}
ul.filelist li {
width: 100%;
margin: 0;
border-bottom: 1px solid var(--izkump_blau);
}
body.gruen ul.filelist li {
border-bottom: 1px solid var(--izkump_gruen);
}
ul.filelist li a {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 10px;
border-radius: 4px;
text-decoration: none;
color: #000;
}
ul.filelist li a span.title {
flex-grow: 1;
margin-right: 10px;
overflow: hidden;
text-overflow: ellipsis;
}
ul.filelist li a:hover,
ul.filelist li a:active,
ul.filelist li a:focus {
background: var(--izkump_hellgrau);
text-decoration: none;
}
ul.filelist li a > span.icon {
margin-right: 5px;
margin-left: -5px;
}
ul.filelist li a > span.icon svg.icon {
width: 30px;
height: 30px;
fill: var(--izkump_blau);
margin-right: 3px;
}
body.gruen ul.filelist li a > span.icon svg.icon {
fill: var(--izkump_gruen);
}
ul.filelist li a > span.filesize {
font-size: 0.8rem;
color: var(--izkump_blau);
}
body.gruen ul.filelist li a > span.filesize {
color: var(--izkump_dunkelgruen);
}
/*_____________________________________________
| |
| LINKS |
|____________________________________________|
*/
ul.linklist {
list-style: none;
padding: 0;
margin: 0 0 30px 0;
font-size: 1rem;
width: 100%;
}
ul.linklist::before,
ul.linklist::after {
display: block;
clear: both;
content: "";
}
ul.linklist li {
width: 100%;
margin: 0;
border-bottom: 1px solid var(--izkump_blau);
}
body.gruen ul.linklist li {
border-bottom: 1px solid var(--izkump_gruen);
}
ul.linklist li a {
display: flex;
justify-content: space-between;
padding: 10px;
border-radius: 4px;
text-decoration: none;
color: #000;
}
ul.linklist li a span.image {
width: 100px;
margin-left: 15px;
flex-shrink: 0;
order: 2;
}
ul.linklist li a span.image img {
width: 100%;
}
ul.linklist li a > span:last-child {
order: 1;
flex-grow: 1;
display: flex;
flex-direction: column;
}
ul.linklist li a span.title {
margin-right: 10px;
}
ul.linklist li a span.description {
font-size: 0.8rem;
color: #666;
padding-top: 7px;
line-height: 1.4;
}
ul.linklist li a:hover,
ul.linklist li a:active,
ul.linklist li a:focus {
background: var(--izkump_hellgrau);
text-decoration: none;
}
ul.linklist li a span.title svg.icon {
width: 18px;
height: 18px;
margin-top: -4px;
fill: var(--izkump_blau);
margin-right: 3px;
}
body.gruen ul.linklist li a span.title svg.icon {
fill: var(--izkump_gruen);
}
ul.linklist li a:hover span.title svg.icon,
ul.linklist li a:active span.title svg.icon,
ul.linklist li a:focus span.title svg.icon {
fill: var(--izkump_blau);
}
body.gruen ul.linklist li a:hover span.title svg.icon,
body.gruen ul.linklist li a:active span.title svg.icon,
body.gruen ul.linklist li a:focus span.title svg.icon {
fill: var(--izkump_gruen);
}
@media (min-width: 576px) {
ul.linklist li a span.image {
width: 150px;
}
}
@media (min-width: 992px) {
ul.linklist li a span.image {
width: 200px;
}
}
/*_____________________________________________
| |
| VIDEOS |
|____________________________________________|
*/
.video-container,
.video-placeholder {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
background-color: #000;
}
.video-container iframe,
.video-container object,
.video-container embed,
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0 none;
}
.video-laden {
background: rgba(0, 0, 0, 0.5);
}
.video-laden > div {
background: var(--izkump_gelb);
padding: 10px 15px;
border-radius: 0.5rem;
max-width: 80%;
}
/*_____________________________________________
| |
| BILDER (+ VIDEOS) |
|____________________________________________|
*/
figure {
display: inline-table;
max-width: 100%;
text-align: right;
padding: 0;
margin: 0;
}
.figure-wrap figure {
margin: 0;
}
.text-center figure {
text-align: center;
}
.text-left figure {
text-align: left;
}
.figure-wrap.klein,
.video-attachment.klein {
max-width: 300px;
width: 25%;
}
.figure-wrap.normal,
.video-attachment.normal {
max-width: 500px;
width: 40%;
}
.figure-wrap.gross,
.video-attachment.gross {
max-width: 720px;
width: 60%;
}
.figure-wrap.maximal,
.video-attachment.maximal {
max-width: 100%;
width: 100%;
}
.figure-wrap.bild-links {
float: left;
margin: 0 30px 30px 0;
text-align: left;
}
.figure-wrap.bild-rechts {
float: right;
margin: 0 0 30px 30px;
text-align: right;
}
.figure-wrap figure {
width: auto !important;
max-width: 100%;
}
@media (max-width: 575.98px) {
.figure-wrap,
.figure-wrap.bild-links,
.figure-wrap.bild-rechts {
float: none;
width: 100%;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
text-align: center;
}
figure {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
text-align: center;
}
}
@media (min-width: 576px) and (max-width: 767.98px) {
figure.klein,
.video-attachment.klein {
max-width: 200px;
}
.figure-wrap.normal,
.figure-wrap.gross {
float: none;
width: 100%;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
text-align: center;
}
figure.normal,
figure.gross,
.video-attachment.normal,
.video-attachment.gross {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
text-align: center;
}
.figure-wrap figure.normal,
.figure-wrap figure.gross {
width: auto !important;
max-width: 100%;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
figure.normal,
.video-attachment.normal {
max-width: 350px;
}
.figure-wrap.gross {
float: none;
width: 100%;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
text-align: center;
}
figure.gross,
.video-attachment.gross {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
text-align: center;
}
.figure-wrap figure.gross {
width: auto !important;
max-width: 100%;
}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
figure.normal,
.video-attachment.normal {
max-width: 400px;
}
figure.gross,
.video-attachment.gross {
max-width: 600px;
}
}
figure img {
max-width: 100%;
}
figcaption,
div.caption {
font-size: .7rem;
padding-top: 3px;
text-align: left;
color: #999;
}
figcaption {
display: table-caption;
caption-side: bottom;
}
.gallery div.caption {
padding-bottom: 7px;
}
figcaption a,
div.caption a {
color: inherit;
}
figcaption a:hover,
figcaption a:active,
figcaption a:focus,
div.caption a:hover
div.caption a:active,
div.caption a:focus {
color: #000;
}
figcaption svg.icon,
div.caption svg.icon {
fill: #999;
width: 16px;
height: 16px;
margin-top: -2px;
}
figcaption a:hover svg.icon,
figcaption a:active svg.icon,
figcaption a:focus svg.icon,
div.caption a:hover svg.icon,
div.caption a:active svg.icon,
div.caption a:focus svg.icon {
fill: #000;
}
/*_____________________________________________
| |
| DETAIL-SEITEN |
|____________________________________________|
*/
/*---------------------------------------------
* Blog-Eintrag
*---------------------------------------------
*/
article.eintrag-blog {
margin-bottom: 60px;
}
article.eintrag-blog figure {
margin-bottom: 40px;
}
article.eintrag-blog .details {
display: flex;
flex-wrap: wrap;
column-gap: 20px;
justify-content: center;
color: var(--gk_grau);
color: #aaa;
font-size: 0.8rem;
text-align: center;
margin-top: -1rem;
margin-bottom: 2rem;
}
@media (min-width: 992px) {
article.eintrag-blog {
margin-bottom: 80px;
}
article.eintrag-blog figure,
article.eintrag-blog figcaption {
padding-left: 15px;
}
}
@media (min-width: 1200px) {
article.eintrag-blog .details {
margin-top: -2rem;
}
article.eintrag-blog figure,
article.eintrag-blog figcaption {
padding-left: 30px;
}
}
/*---------------------------------------------
* Termin
*---------------------------------------------
*/
.eintrag-termin {
margin-bottom: 80px;
}
.eintrag-termin .termin-details {
background: var(--izkump_gruen);
margin-bottom: 30px;
padding: 15px 20px;
font-weight: 500;
}
.eintrag-termin .termin-details table a {
color: #000;
font-weight: normal;
}
.eintrag-termin .termin-details table th {
padding-right: 15px;
vertical-align: top;
padding: 5px 10px;
}
.eintrag-termin .termin-details table th span {
display: none;
}
.eintrag-termin .termin-details table td {
padding: 5px 10px;
}
.eintrag-termin .termin-details table tr.ort td > * {
display: block;
}
.eintrag-termin figure {
margin-bottom: 30px;
}
@media (min-width: 992px) {
.eintrag-termin {
margin-bottom: 80px;
}
}
/*_____________________________________________
| |
| SPEZIAL |
|____________________________________________|
*/
/*---------------------------------------------
* News-Box (Startseite)
*---------------------------------------------
*/
.news-box h1,
.news-box h2,
.news-box h3,
.news-box h4 {
text-align: center;
display: block;
}
.news-box h1 {font-size: 1.8rem; }
.news-box h2 {font-size: 1.5rem; }
.news-box h3 {font-size: 1.4rem; }
.news-box h4 {font-size: 1.2rem; }
.news-box h1:after,
.news-box h2:after,
.news-box h3:after,
.news-box h4:after {
border-top: 2px solid var(--izkump_gruen);
margin: .3em auto 1em auto;
width: 50%;
}
@media (min-width: 992px) {
.news-box h1 { font-size: 2.6rem; }
.news-box h2 { font-size: 2.2rem; }
.news-box h3 { font-size: 1.9rem; }
.news-box h4 { font-size: 1.6rem; }
}