/*
Theme Name: CMFtheme
Author: CMF websolutions
Author URI: http://www.cmf-websolutions.de
Version: 1.0.1
License: GNU General Public License v2 or later
Text Domain: cmftheme
Tags:
This theme, like WordPress, is licensed under the GPL.
CMFtheme is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
## Links
## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
## Posts and pages
## Comments
# Infinite scroll
# Media
## Captions
## Galleries
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: 900;
}
dfn {
font-style: italic;
}
mark {
background: #ff0;
color: #000;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 1em 40px;
}
hr {
box-sizing: content-box;
height: 0;
}
pre {
overflow: auto;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input {
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
}
optgroup {
font-weight: bold;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
/* martel-200 - latin */
@font-face {
font-family: 'Martel';
font-style: normal;
font-weight: 200;
src: url('fonts/martel-v10-latin-200.eot'); /* IE9 Compat Modes */
src: local(''),
url('fonts/martel-v10-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/martel-v10-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/martel-v10-latin-200.woff') format('woff'), /* Modern Browsers */
url('fonts/martel-v10-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/martel-v10-latin-200.svg#Martel') format('svg'); /* Legacy iOS */
}
/* martel-300 - latin */
@font-face {
font-family: 'Martel';
font-style: normal;
font-weight: 300;
src: url('fonts/martel-v10-latin-300.eot'); /* IE9 Compat Modes */
src: local(''),
url('fonts/martel-v10-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/martel-v10-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/martel-v10-latin-300.woff') format('woff'), /* Modern Browsers */
url('fonts/martel-v10-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/martel-v10-latin-300.svg#Martel') format('svg'); /* Legacy iOS */
}
/* martel-regular - latin */
@font-face {
font-family: 'Martel';
font-style: normal;
font-weight: 400;
src: url('fonts/martel-v10-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('fonts/martel-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/martel-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/martel-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
url('fonts/martel-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/martel-v10-latin-regular.svg#Martel') format('svg'); /* Legacy iOS */
}
/* martel-600 - latin */
@font-face {
font-family: 'Martel';
font-style: normal;
font-weight: 600;
src: url('fonts/martel-v10-latin-600.eot'); /* IE9 Compat Modes */
src: local(''),
url('fonts/martel-v10-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/martel-v10-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/martel-v10-latin-600.woff') format('woff'), /* Modern Browsers */
url('fonts/martel-v10-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/martel-v10-latin-600.svg#Martel') format('svg'); /* Legacy iOS */
}
/* martel-700 - latin */
@font-face {
font-family: 'Martel';
font-style: normal;
font-weight: 700;
src: url('fonts/martel-v10-latin-700.eot'); /* IE9 Compat Modes */
src: local(''),
url('fonts/martel-v10-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/martel-v10-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/martel-v10-latin-700.woff') format('woff'), /* Modern Browsers */
url('fonts/martel-v10-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/martel-v10-latin-700.svg#Martel') format('svg'); /* Legacy iOS */
}
/* martel-800 - latin */
@font-face {
font-family: 'Martel';
font-style: normal;
font-weight: 800;
src: url('fonts/martel-v10-latin-800.eot'); /* IE9 Compat Modes */
src: local(''),
url('fonts/martel-v10-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/martel-v10-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/martel-v10-latin-800.woff') format('woff'), /* Modern Browsers */
url('fonts/martel-v10-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/martel-v10-latin-800.svg#Martel') format('svg'); /* Legacy iOS */
}
/* martel-900 - latin */
@font-face {
font-family: 'Martel';
font-style: normal;
font-weight: 900;
src: url('fonts/martel-v10-latin-900.eot'); /* IE9 Compat Modes */
src: local(''),
url('fonts/martel-v10-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/martel-v10-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/martel-v10-latin-900.woff') format('woff'), /* Modern Browsers */
url('fonts/martel-v10-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/martel-v10-latin-900.svg#Martel') format('svg'); /* Legacy iOS */
}
body,
button,
input,
select,
textarea {
color: #404040;
font-family: 'Martel', serif;
font-size: 16px; /* xxx */
line-height: 1.5;
}
h1,
h2,
h3,
h4,
h5,
h6 {
clear: both;
}
h1 {
font-size: 22px;
font-weight:900;
margin: 0.67em 0;
color:rgb(0,0,0); /* xxx */
text-transform:uppercase;
}
h2 {
font-size: 18px;
color: rgb(0,0,0); /* xxx */
}
h3 {
font-size:20px;
font-weight:800;
}
p {
margin-bottom: 1.5em;
}
dfn,
cite,
em,
i {
font-style: italic;
}
blockquote {
margin: 0 1.5em;
}
address {
margin: 0 0 1.5em;
}
pre {
background: #eee;
font-family: "Courier 10 Pitch", Courier, monospace;
font-size: 15px;
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: 1.6em;
max-width: 100%;
overflow: auto;
padding: 1.6em;
}
code,
kbd,
tt,
var {
font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
font-size: 15px;
font-size: 0.9375rem;
}
abbr,
acronym {
border-bottom: 1px dotted #666;
cursor: help;
}
mark,
ins {
background: #fff9c0;
text-decoration: none;
}
big {
font-size: 125%;
}
/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
box-sizing: border-box;
}
*,
*:before,
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
box-sizing: inherit;
}
body {
background: #fff; /* Fallback for when there is no custom background color defined. */
/*background: rgb(0,0,0);*/
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
}
blockquote,
q {
quotes: "" "";
}
hr {
background-color: #ccc;
border: 0;
height: 1px;
margin-bottom: 1.5em;
}
ul,
ol {
margin:0; /* mf */
padding-left:20px; /* mf */
}
ul {
list-style: square;
}
ol {
list-style: decimal;
}
/* Weitere Listenpunkt-Optionen unterhalb von #content definieren, damit sie nicht den Header oder das mobile Menue betreffen */
ul li {
color: #222222; /* xxx*/ /* Listenpunktfarbe */
}
ul li span {
/*color: #404040; */ /* xxx */ /* Farbe des Textes innerhalb einer Liste */
}
li > ul,
li > ol {
margin-bottom: 0;
margin-left: 1.5em;
}
dt {
font-weight: bold;
}
dd {
margin: 0 1.5em 1.5em;
}
img {
height: auto; /* Make sure images are scaled correctly. */
max-width: 100%; /* Adhere to container width. */
}
figure {
margin: 1em 0; /* Extra wide images within figure tags don't overflow the content area. */
}
table {
margin: 0 0 1.5em;
width: 100%;
}
/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
border: 1px solid;
border-color: #ccc #ccc #bbb;
border-radius: 3px;
background: #e6e6e6;
color: rgba(0, 0, 0, .8);
font-size: 12px;
font-size: 0.75rem;
line-height: 1;
padding: .6em 1em .4em;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
border-color: #ccc #bbb #aaa;
}
button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
border-color: #aaa #bbb #bbb;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
color: #666;
border: 1px solid #ccc;
border-radius: 3px;
padding: 3px;
}
select {
border: 1px solid #ccc;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
color: #111;
}
textarea {
width: 100%;
}
/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
color: #222222; /* xxx */
/*text-decoration:none;*/
}
a:visited {
color: #222222; /* xxx */
}
a:hover,
a:focus,
a:active {
color: #222222; /* xxx */
}
a:focus {
outline: thin dotted;
}
a:hover,
a:active {
outline: 0;
}
/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
margin: 0 0 1.5em;
overflow: hidden;
}
/* wie buttons */
.site-main .comment-navigation a,
.site-main .posts-navigation a,
.site-main .post-navigation a {
display:inline-block; background-color: rgb(157,144,100); padding:10px 50px; font-weight:800; width:auto;
text-align:center;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
float: left;
width: 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
float: right;
text-align: right;
width: 50%;
}
/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: #21759b;
display: block;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; /* Above WP toolbar. */
}
/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
outline: 0;
}
/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
display: inline;
float: left;
margin-right: 1.5em;
}
.alignright {
display: inline;
float: right;
margin-left: 1.5em;
}
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
content: "";
display: table;
table-layout: fixed;
}
.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
clear: both;
}
/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
margin: 0 0 1.5em;
}
/* Make sure select elements fit in widgets. */
.widget select {
max-width: 100%;
}
/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
display: block;
}
.hentry {
/* margin: 0 0 1.5em; */
margin:0;
}
.byline,
.updated:not(.published) {
display: none;
}
.single .byline,
.group-blog .byline {
display: inline;
}
.page-content,
.entry-content,
.entry-summary {
/* margin: 1.5em 0 0; */
}
.page-links {
clear: both;
margin: 0 0 1.5em;
}
/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
word-wrap: break-word;
}
.bypostauthor {
display: block;
}
/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
display: none;
}
/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
display: block;
}
/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
border: none;
margin-bottom: 0;
margin-top: 0;
padding: 0;
}
/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
max-width: 100%;
}
/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
margin: 0;
padding:5px;
background: #fafafa; /* xxx */
font-size:12px;
}
.wp-caption img[class*="wp-image-"] {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption .wp-caption-text {
margin: 0.8075em 0;
}
.wp-caption-text {
text-align: center;
}
/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
margin-bottom: 1.5em;
}
.gallery-item {
display: inline-block;
text-align: center;
vertical-align: top;
width: 100%;
}
.gallery-columns-2 .gallery-item {
max-width: 50%;
}
.gallery-columns-3 .gallery-item {
max-width: 33.33%;
}
.gallery-columns-4 .gallery-item {
max-width: 25%;
}
.gallery-columns-5 .gallery-item {
max-width: 20%;
}
.gallery-columns-6 .gallery-item {
max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
max-width: 11.11%;
}
.gallery-caption {
display: block;
}
/* --------------------------------------------------------------
CMF
-------------------------------------------------------------- */
/* ****************************
Template Farben:
THW Gold rgb(157,144,100);
THW Gold hell rgb(225,218,198);
**************************** */
/* --------------------------------------------------------------
Allgemein sinnvolle Angaben für alle Themes
-------------------------------------------------------------- */
.clearfix::before,
.clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1; /* Fuer den IE6 und IE7 */
}
a.text_link,
a.text_link:visited,
a.text_link:hover {text-decoration:none;}
a.anker,
h1 a.anker,
h2 a.anker {
display: block;
position: relative;
top: -160px;
visibility: hidden;
}
a.blockverlinkung {text-decoration:none;} /* Inhalt
- Es darf keinen anderen Link innerhalb des Blocks geben. */
/* Wichtig für Lightbox Effekt, wenn das Bild als DIV-Hintergrund eingebunden ist
und im Vordergrund ein transparentes .gif steht */
img.transparent {width:100%; height:100%;}
span.mobile_br {display:block;} /* line break erzwingen bei mobiler Darstellung durch erste Zeilezweite Zeile */
span.desktop_br {display:inline;} /* line break erzwingen bei Desktop-Darstellung durch erste Zeilezweite Zeile */
span.hide_mobile {display:none;}
.versteckmich {display:none;} /* fuer Kontaktformular Antispam */
/* --------------------------------------------------------------
Grund-Elemente
-------------------------------------------------------------- */
/* Wenn eine Liste nach einem p folgt */
p + ul {margin-top:-15px;}
/* --------------------------------------------------------------
Header
-------------------------------------------------------------- */
header {
position: fixed;
width: 100%;
top: 0;
left: 0;
color: white;
z-index:500;
}
header,
#header_full_background { height:115px; } /* #post_header ebenfalls anpassen */
#header_full_background { padding-top:10px; background:url('img/thw_header_bg_2x.jpg'); background-color:black; background-position:center;}
#header_fahne {
width:100%;
height:850px;
background-size:cover;
background-image:url('img/header-fahne-weiss.jpg');
background-position:left center;
position:absolute;
top:0;
left:0;
z-index:1000;
opacity: 0.2;
display:none;
}
/* Zwischen header und #content */
#post_header,
#header_slider {
margin-top:115px; /* mf */
}
/*
Transition-Effekte
funktionieren nur, wenn sie in den unterschiedlichen Status (z.B. mit .sticky und ohne)
auf den exakt gleichen Selektor angesprochen werden und die gleichen Einheiten z.B. px verwendet werden.
*/
header,
#header_logo,
#header_image,
#header_slider,
nav.main-navigation {
-webkit-transition: all 1.0s;
-moz-transition: all 1.0s;
transition: all 1.0s;
}
#header_logo {
/* mf */
background-image: url('img/thw-logo-header_standard_trans.png');
background-repeat:no-repeat;
background-size:contain;
height:90px;
width:134px;
margin-left:75px;
}
#header_title {display:none; /* mf */}
#header_social_wrapper {display:none; /* mf */}
#header_nav_full_background {background:white; border-bottom:1px solid #eeeeee; /* xxx */}
#header_nav {
float:right; /* Menü soll rechtsbündig stehen */
margin-left:auto;
margin-right:20px;
}
/*
header.sticky {
height:68px;
border-bottom:1px solid #222222;
}
header.sticky #header_logo {width:180px; margin-top:5px; }
header.sticky nav.main-navigation { margin-top: 29px;}
*/
/* Abstand für Hauptinhaltsbereich */
.content_breite {
max-width:1030px; /* Sonderfall, überall 1030px, nur auf der Startseite 1600px */
margin:0 auto;
}
.breadcrumb {margin-top:20px;}
#content a:before {content: "\0000BB" " "; font-size:18px;}
#content a.imagelink:before {content: "";}
div.full_width {max-width:100%;}
div.full_width_padding {padding:20px 0;}
div.full_width.braun {background: #222222; color:white;} /* xxx */
div.full_width.braun h1,
div.full_width.braun h2,
div.full_width.braun h3 {color:white; }
div.full_width.braun a {color:white; text-decoration:underline; }
div.full_width.grau {background: #fafafa; color:#404040;}
/* --------------------------------------------------------------
Navigation
-------------------------------------------------------------- */
nav.main-navigation {
float:left;
display:none; /* mobile first */
}
nav.main-navigation ul {margin:0; padding:0;}
nav.main-navigation li {display:inline-block; /* wichtig für submenu */}
nav.main-navigation li a {color:#404040; text-decoration:none;}
nav.main-navigation li a:hover {color:#404040;}
nav.main-navigation li.current-menu-item a {color:#222222; font-weight:bold;}
/* --- Untermenüs --- */
nav.main-navigation ul.sub-menu {
display: none; /* wird in media-query zu display: inline-block; */
position: absolute;
background-color: #fafafa; /* xxx */
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
nav.main-navigation ul li.menu-item-has-children:hover ul.sub-menu {display: block; }
nav.main-navigation ul li.menu-item-has-children:hover ul.sub-menu * {z-index:5000;}
nav.main-navigation ul.sub-menu li {display: block; padding-bottom:10px; }
nav.main-navigation ul.sub-menu li:last-child{padding-bottom:0;}
nav.main-navigation ul.sub-menu li a {color:#222222; font-size:15px; font-weight:normal;}
nav.main-navigation ul.sub-menu li a:hover {color:#222222;}
div#sfm-sidebar a.button {
display:block;
text-align:center;
margin-bottom:20px; padding:10px;
background:rgb(157,144,100); text-decoration:none;
font-weight:900;
}
/* --------------------------------------------------------------
Haupt-Inhaltsbereich
-------------------------------------------------------------- */
#primary {padding-bottom:100px;}
#content {min-height:600px; }
/*#content .content_breite {border:1px solid black;}*/
.content_breite {padding:0 15px; }
/* Listenpunkte unterhalb von #content definieren, damit sie nicht den Header oder das mobile Menue betreffen.
Sofern Bilder verwendet werden, diese in doppelter Auflösung für Retina bereitstellen. */
#content ul {
/*list-style: none;*/
line-height:1.4;
}
#content ul li {
margin-bottom:10px;
/*
background-image: doppelte Aufloesung als background-size (fuer Retina)
background-size: 12px 12px; z.B. 12px 12px muss der Hälfte der Dateigroesse entsprechen
background-position: 0 9px; siehe auch: ul -> line-height
*/
/*
background-image: url('img/listenpunkt.png');
background-size:12px 12px;
background-position: 0 9px;
background-repeat: no-repeat;
padding-left:20px;
*/
}
#content .box_grau .content_breite {padding:20px 0 20px 0;}
/* --------------------------------------------------------------
Footer
-------------------------------------------------------------- */
.site-footer {
clear: both;
width: 100%;
background:black;
border-bottom:10px solid rgb(157,144,100);
color:white;
padding:20px;
padding:0;
font-size:12px; /* mf */
}
.site-footer a {
color:white;
}
.site-footer #footer_fusszeile_wrapper {margin-top:30px;}
.site-footer #footer_copyright { padding-bottom:15px;}
.site-footer #footer_menue { }
.site-footer ul#footer-menu {padding-left:0; padding-bottom:20px; }
.site-footer ul#footer-menu li {display:inline; margin-left:30px; /* mf */}
.site-footer ul#footer-menu li:first-child {margin-left:0; /* mf */}
.site-footer ul#footer-menu li a {text-decoration:none;}
.site-footer .spalte .inner {padding:0;}
.site-footer #footer_social_wrapper {}
.site-footer #footer_social_wrapper div {display:inline-block; margin-left:15px;}
.site-footer #footer_social_wrapper div:first-child {margin-left:0;}
.site-footer #sponsoren_outer_wrapper {background:white;}
.site-footer .sponsoren_element {
float:left;
text-align:center;
border:1px solid rgb(157,144,100);
/* Inhalt vertikal zentrieren */
display: flex;
justify-content: center;
align-items: center;
}
.site-footer .sponsoren_element.img_g_33 {width:100%; } /* mf */
.site-footer .sponsoren_element a .sponsor_keinbild_text {color:black; text-decoration:none; font-size:16px; }
.site-footer .sponsoren_element.img_k { width:50%; min-height:120px; padding:10px;} /* mf */
/* --------------------------------------------------------------
Content-Styles
-------------------------------------------------------------- */
button {
background-color: rgb(157,144,100);
color: white;
border: none;
border-radius:0;
padding: 10px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 0;
cursor: pointer;
}
button a {color:white; text-decoration:none;}
#content a.button { display:inline-block; background-color: rgb(157,144,100); font-size:20px; font-weight:800; text-decoration:none; padding:10px 10px;}
#content a:before {content: none;}
#slide_up_image_wrapper {position:relative;}
#slide_up_image {
position:absolute;
right:30px;
bottom:30px;
z-index:2;
width:40px;
height:40px;
background:url('img/slide_up.png');
}
div.trennlinie_grau {border-top:1px solid #9daab1; margin:50px 0;}
/* Allgemein für alle Spalten */
.spalte > h1 {margin-top:0;}
.spalte > h2 {margin-top:0;}
.spalte img {display:block; margin:0;}
.spalte .wp-caption-text {text-align:left;}
.spalte.vertical_center {display: flex; justify-content: center; align-items: center;} /* funktioniert nur zusammen mit .js wegen CMFeqHeights */
/* --- Spaltendarstellung ------------ */
/* siehe https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_portfolio_gallery */
.reihe,
.reihe > .spalte {
padding: 0px; /* Spaltenabstand innerhalb einer Zeile */
}
/* Clear floats after rows */
.reihe:after {
content: "";
display: table;
clear: both;
}
.spalte .inner {
padding: 10px;
}
.spalte {
float: left;
width: 100%; /* mf */
}
/* --------------------------------------------------------------
ACF - Formatierungen, insbesondere für Flex-Content
-------------------------------------------------------------- */
.box_aussenabstand {padding:50px 0;}
.box_innenabstand {}
.inhalt_spalten_wrapper {margin:0;}
.inhalt_spalten_wrapper .einleitung {margin-bottom:20px;}
.inhalt_spalten_wrapper .ausleitung {}
.inhalt_spalten_wrapper .spalte {margin-bottom:20px;} /* mf */
.inhalt_spalten_wrapper.spalten_1 .spalte {width:100%; }
.inhalt_spalten_wrapper.spalten_2 .spalte {width:100%; } /* mf */
.inhalt_spalten_wrapper.spalten_3 .spalte {width:100%; } /* mf */
.inhalt_spalten_wrapper.spalten_4 .spalte {width:100%; } /* mf */
.bild_text_horizontal_wrapper {}
.bild_text_horizontal_wrapper div.bild {float:left;}
.bild_text_horizontal_wrapper div.text {float:left;}
.bild_text_horizontal_wrapper .text > p {margin-top:0;}
.bild_text_horizontal_wrapper div:nth-of-type(2) {margin-top:10px;} /* mobile first */
/* Farben in Auswahlfeld, insbes. bei full-width bzw. textfarbe_auswahl
Selektor: Stern, damit auch die Überschriften erfasst werden
*/
/*.textfarbe_weiss * {color:white;} */ /* * gibt Probleme z.B. beim footer mit gold */
.textfarbe_weiss {color:white;}
.textfarbe_std_schrift * {} /* einfach nicht definieren, damit auch die Überschriften nicht geändert werden */
.textfarbe_gold {color:rgb(157,144,100);}
.bg_farbe_standard {}
.bg_schwarz {background:black;}
.bg_gold {background:rgb(157,144,100);}
.bg_gold_hell {background:rgb(225,218,198);}
/* --------------------------------------------------------------
Shortcode Styles
-------------------------------------------------------------- */
div.newstrenner {
width:100%;
height:50px; /* mf */
}
/* Sponsoren Detailseite */
#sponsoren_detail_outer_wrapper .spalte.sp1 {margin-bottom:0;}
#sponsoren_detail_outer_wrapper .spalte.sp2 h2 {margin-top:0;}
/* -----------------------------------------------------------------
CSS Grid auto-fill – Responsive Layouts ohne Media Queries
https://blog.kulturbanause.de/2018/07/css-grid-auto-fill-responsive-layouts-ohne-media-queries
----------------------------------------------------------------- */
.grid_wrapper {
/* Allgemeine Definition ; "grid-template-columns" muss dann inline erfolgen, da die Breite in den Optionen festgelegt wird.
Hierfür wurde ein ACF-Typ entwickelt (Flex Content -> Flex-Grid) */
display: grid;
}
/* Beispiel einer konkreten Klasse, sofern .grid_wrapper nicht verwendet wird
Umbrechen, sobald die Box 300 Pixel Breite hat */
/*
.grid_wrapper_300 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
border:1px solid red;
}
*/
/* --------------------------------------------------------------
Spezielle Seiten
body.page-id-xxx {}
-------------------------------------------------------------- */
/* Auf der Startseite soll maximal 1600px gelten. Auf allen anderen Seiten schmaler
Aber auch auf der Startseite nur im Hauptinhaltsbereich, nicht im Footer.
*/
body.home #content .content_breite {max-width:1600px !important;}
#start_junioren_campus .spalte{ margin-bottom:0; }
#start_junioren_campus .spalte .inner { padding:0; }
#newsfilter {text-align:center;}
#newsfilter button {background:none; color:rgb(157,144,100); font-weight:bold; font-size:20px; padding:0; margin-right:40px; margin-bottom:20px;}
#newsfilter button.filterauswahl {color:black; border-bottom: 1px solid rgb(157,144,100); padding-bottom:5px; }
.news_wrapper .grid-sizer,
.news_element.grid-item { width: 20%; }
.news_element.grid-item.first {width:40%;} /* In Desktop-Darstellung soll das erste News-Element breiter sein */
.news_element.grid-item.first .bild {height:500px; background-size:cover;}
.news_wrapper {margin:20px 0;}
.news_wrapper .news_element { }
.news_wrapper .news_element .abstand_wrapper { margin-bottom:15px; }
.news_wrapper .news_element .inner { background:black; color: white; }
.news_wrapper .news_element .inner a { color: white; }
.news_wrapper .news_element .bild { background-size:cover; background-position:center top ; background-repeat: no-repeat; height:350px; /* mf */}
.news_wrapper .news_element .kategorie_wrapper { margin-top:-350px; margin-bottom:325px; text-align:right;}
.news_element.grid-item.first .kategorie_wrapper { margin-top:-500px; margin-bottom:490px;}
.news_wrapper .news_element .kategorie { padding: 0 15px; background:white; color:black; }
.news_wrapper .news_element .titel { padding:20px; font-size:20px; font-weight:bold;}
.news_wrapper .news_element .kurzbeschreibung { padding:0 20px 20px 20px; }
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
.news_wrapper .grid-sizer,
.news_element.grid-item,
.news_element.grid-item.first {
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) {
.news_wrapper .grid-sizer,
.news_element.grid-item,
.news_element.grid-item.first {
width: 100%;
}
}
div.abschnitt_schraeg_oben {
background:white;
clip-path: polygon(0 0, 100% 0, 100% 14%, 0% 100%); /* Die % Angabe bezieht sich auf die Containerhöhe */
height:20px;
margin-bottom:30px;
}
div.abschnitt_schraeg_unten {
background:white;
clip-path: polygon(0 86%, 100% 0, 100% 100%, 0% 100%); /* Die % Angabe bezieht sich auf die Containerhöhe */
height:20px;
margin-top:30px;
}
/* ----------------- */
.news_outer_wrapper {margin-top:50px; background:black; color: white; }
.news_outer_wrapper h1,
.news_outer_wrapper h2 {color: white;}
.news_outer_wrapper .inhalt_spalten_wrapper { }
.news_outer_wrapper .inhalt_spalten_wrapper .spalte { background:black; }
.news_outer_wrapper .inhalt_spalten_wrapper .spalte .bild { background:white; } /* Falls das Bild zu klein ist */
.news_outer_wrapper .inhalt_spalten_wrapper .spalte .bild img { height:250px; object-fit: cover; }
.news_outer_wrapper .inhalt_spalten_wrapper .spalte .inner {background:white; color:black; padding:25px 20px; min-height:200px;}
.news_outer_wrapper .inhalt_spalten_wrapper .spalte h2 { color:black; margin-top:0;}
.news_outer_wrapper .inhalt_spalten_wrapper .spalte .kurzbeschreibung { }
/* --- Beginn Startseite Boxen ----------------- */
.kategorie_teaser h1,
.kategorie_teaser h2 {color: white; margin-top:0; text-transform: uppercase;}
.kategorie_teaser .inhalt_spalten_wrapper .spalte img { /*height:250px; object-fit: cover; */}
.kategorie_teaser .inhalt_spalten_wrapper .spalte .inner {padding:0; background:white; color:black; padding:15px 20px; min-height:200px;}
.kategorie_teaser .inhalt_spalten_wrapper .spalte h2 { color:black; font-size:20px; font-weight:800; margin-top:0; text-transform:none;}
.kategorie_teaser .inhalt_spalten_wrapper .spalte .kurzbeschreibung a {color:white; }
#campus_outer_wrapper,
#asp_termine_outer_wrapper,
#scouting_outer_wrapper,
#kader_outer_wrapper {margin-top:50px; }
#asp_termine_outer_wrapper h1,
#asp_termine_outer_wrapper h2,
#scouting_outer_wrapper h1,
#scouting_outer_wrapper h2,
#kader_outer_wrapper h1,
#kader_outer_wrapper h2 {color: black; margin-top:0;}
#asp_termine_outer_wrapper .inhalt_spalten_wrapper .spalte h2,
#scouting_outer_wrapper .inhalt_spalten_wrapper .spalte h2,
#kader_outer_wrapper .inhalt_spalten_wrapper .spalte h2 { color:white;}
#asp_termine_outer_wrapper .inhalt_spalten_wrapper .spalte .inner,
#scouting_outer_wrapper .inhalt_spalten_wrapper .spalte .inner,
#kader_outer_wrapper .inhalt_spalten_wrapper .spalte .inner {background:black; color:white; padding:15px 20px;}
#asp_termine_outer_wrapper a.button,
#scouting_outer_wrapper a.button,
#kader_outer_wrapper a.button {background:black; color:white;}
#kader_outer_wrapper .inhalt_spalten_wrapper .spalte .bild { background:white; } /* Falls das Bild zu klein ist */
#kader_outer_wrapper .inhalt_spalten_wrapper #cta_mach_mit .bild img { height:auto;}
/* --- Ende Startseite Boxen ----------------- */
.termine_wrapper th {display:none;} /* mf */
.termine_wrapper table tr td {display:block;} /* mf - macht die Tabelle responsive */
.termine_wrapper td.datum {display:inline-block;} /* mobil einzeilig darstellen */
.termine_wrapper td.uhrzeit {display:inline-block; padding-left:15px;} /* mobil einzeilig darstellen */
.termine_wrapper tr.termin_element {margin:20px; border-bottom:25px solid white;}
.termine_wrapper td.titel {font-weight:900;}
#titelbild img {
display:block;
width:100%;
/*
max-height:650px;
object-fit: cover;
*/
margin-left:auto; margin-right:auto;
clip-path: polygon(0 0, 100% 0, 100% 86%, 0% 100%); /* Die % Angabe bezieht sich auf die Containerhöhe */
}
/* Artikelseite */
#artikel_einleitung {}
#artikel_einleitung .kurzbeschreibung {font-weight:bold;}
/* Archiv */
#archiv_artikel_einleitung {margin-bottom:50px;}
#artikel_einleitung .kurzbeschreibung {font-weight:bold;}
/* Kader */
article.kader {margin-left:auto; margin-right:auto;}
/* --- Akkordeon --- */
/*.outer_element_wrapper_akkordeon h2 {text-transform:uppercase; font-weight:900; font-size:22px;}*/
h2 {text-transform:uppercase; font-weight:900; font-size:22px;}
h3.akkordeon_titel {
padding:10px 0;
background-size:29px 29px; background-repeat:no-repeat; background-position: right;
border-bottom: 1px solid rgb(157,144,100);
}
h3.akkordeon_titel.ui-state-active {background-image:url('img/accordeon_open.jpg'); }
h3.akkordeon_titel {background-image:url('img/accordeon_click_to_open.jpg')}
h3.akkordeon_titel:hover {cursor: pointer;}
h3.akkordeon_titel[aria-expanded="true"] {font-weight:900;}
/* Akkoredon Typ: Bildergalerie */
.akkordeon_bildergalerie .bild {}
.akkordeon_bildergalerie .beschriftung {margin-top:15px;}
/* --------------------------------------------------------------
Zusatz-Plugins
-------------------------------------------------------------- */