/*	Theme Name: MSO-Webdesign 2026
	URI: https://www.mso-webdesign.de
	Description: individual wordpress theme
	Version: 01.00
	Author: Marco Schwarz
	Author URI: https://mso-webdesign.de/
	The CSS, XHTML and design is released under the GPL:
	http://www.opensource.org/licenses/gpl-license.php
*/

@font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 400; src: url('fonts/noto-sans-jp-v55-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 500; src: url('fonts/noto-sans-jp-v55-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 700; src: url('fonts/noto-sans-jp-v55-latin-700.woff2') format('woff2'); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { min-height: 100.01%; }
body { font-family: 'Noto Sans JP', Segoe UI, Optima, Tahoma, Helvetica, Arial, sans-serif; font-size: 110%; color: #000; background-color: #fff; }

a, a:link, a:visited { color: #b50000; text-decoration: none; font-weight: 500; }
a:hover, a:active, a:focus { color: #fa3030; text-decoration: underline; }
.oben a, .oben a:link, .oben a:visited { font-size: 1.2em; color: #000; text-decoration: none; padding: 100px 0 0 0; }
.oben a:hover, .oben a:active, .oben a:focus { color: #000; text-decoration: none; }
.btn { display: inline-block; color: #000; background-color: #d1ea8a; margin: 0; text-align: center; border: 1px solid #094099; border-radius: 10px; transition: background-color 0.5s ease-out; }
.btn:hover { background-color: #bad669; }
.btn a, .btn a:link, .btn a:visited { display: block; padding: 12px; color: #000; }
.btn a:hover, .btn a:active, .btn a:focus { color: #000; text-decoration: none; }

header { position: -webkit-sticky; position: sticky; top: 0;  z-index: 1030; background: linear-gradient(45deg,  #f0d7a6 0%,#ffe6b5  10%,#ffdbb5 17%,#faffb5 33%,#ffe6b5 52%,#ecffb5 79%,#ffdbb5 90%,#f0d7a6 100%); }
header .container { padding: 10px 0 0 0; }
header p { margin: 0 0 10px 0; line-height: 1em; }
header .dashicons { font-size: 20px; width: 20px; height: 20px; }
header a, header a:link, header a:visited { color: #000; }
header a:hover, header a:active, header a:focus { color: #fa3030; text-decoration: none; }

nav { z-index: 1030; background-color: transparent; }
nav .container { padding: 35px 0 10px 0; }
a.toggleMenu { display: none; }
.nav { display: flex; list-style: none; z-index: 1030; background-color: transparent; }
.nav:before, .nav:after { content: " "; display: table; }
.nav:after { clear: both; }
.nav a { text-decoration: none; padding: 7px 0; color: #000; font-size: 1em; font-weight: 500; }
.nav a:hover { text-decoration: none; color: #fa3030; }
.nav li { flex: 1 1 auto; position: relative; text-align: center; }
.nav > li > a { display: block; }
.nav li.current-menu-item a { text-decoration: none; color: #fa3030; }
.nav .dashicons, .nav .dashicons-before:before { font-size: 24px; width: 24px; height: 24px; vertical-align: -15%; }

section { position: relative; background: linear-gradient(to right, #ffe6b5 0%,#ffffff 5%,#ffffff 95%,#ffe6b5 100%); }
.container { max-width: 1400px; margin: 0 auto; padding: 50px 5%; }

.flex { display: flex; flex-wrap: wrap; justify-content: space-between; }
.box50 { flex: 0 1 auto; width: 48%; }
.box70 { flex: 0 1 auto; width: 66%; }
.box30 { flex: 0 1 auto; width: 32%; }
.box32 { flex: 0 1 auto; width: 31%; }
.box35 { flex: 0 1 auto; width: 35%; }
.box65 { flex: 0 1 auto; width: 63%; }

.kontaktbox { margin: 0 0 60px 0; background-color: #f0f4d0; border: 1px solid #ff8f1e; color: #000; }
.kontaktbox h2, .kontaktbox h3 { margin: 0 0 15px 0; padding: 10px; background-color: #ff8f1e; font-size: 1.2em; }
.kontaktbox p { margin: 0 0 10px 0; padding: 10px 10px 0 10px; }
.kontaktbox p.kein { margin: 0 0 20px 0; }
.kontaktbox ul.tx { margin: 10px 20px 20px 35px; }
.kontaktbox a, .kontaktbox a:link, .kontaktbox a:visited { color: #a50000; }
.kontaktbox .btn { width: 100%; }
.kontaktbox .btn a, .kontaktbox .btn a:link, .kontaktbox .btn a:visited { color: #000; }

table { width: 100%; border: 0; margin: 10px 0 0 0; padding: 0; border-collapse: collapse; border-spacing: 0; }
table p { margin: 0; }
td { padding: 10px 0; text-align: left; vertical-align: top; }
td.preis { width: 140px; padding: 10px 0 10px 10px; text-align: right; vertical-align: top; }

footer { background-color: #103050; color: #fff; }
footer .container { padding: 50px 5% 20px 5%; }
footer p { margin: 0 0 20px 0; }
footer .dashicons { display: inline; vertical-align: -20%; }
footer a, footer a:link, footer a:visited {  color: #fff; font-weight: 400; text-decoration: none; }
footer a:hover, footer a:active, footer a:focus  { color: #ffc361; text-decoration: none; }

ul.fusslist { max-width: 300px; margin: 0 0 30px 0; list-style-type: none; }
ul.fusslist li { font-size: 1em; line-height: 2.3em; color: #fff; font-weight: 400; }
ul.fusslist li a { color: #fff; font-weight: 400; }
ul.fusslist li:hover a, ul.fusslist li a:hover, ul.fusslist li a:focus { color: #ffc361; text-decoration: none; }

.dashicons { font-size: 30px; width: 30px; height: 30px; vertical-align: middle; }

.right { float: right; }
.left { float: left; }
.rechts { text-align: right; }
.center { text-align: center; }
.abst { margin: 0 0 50px 0; }
.nah { margin: 0 0 15px 0; }
.null { margin: 0; }
.clear { clear: both; }
.gross { font-size: 2em; line-height: 1.2em; }
.big { font-size: 1.4em; font-weight: 500; line-height: 1.6em; }
.big2 { font-size: 1.2em; }
strong, b { font-weight: 700; }
img { border: 0; padding: 0; margin: 0; max-width: 100%; }

h1, h2, h3, h4 { font-weight: 400; }
h1 { font-size: 2.4em; line-height: 1.2em; margin: 0 0 50px 0; }
h2 { font-size: 1.7em; line-height: 1.4em; margin: 0 0 20px 0; }
h3 { font-size: 1.5em; line-height: 1.4em; margin: 0 0 20px 0; }
p { margin: 0 0 30px 0; line-height: 1.5em; font-size: 1em; }
.bild { float: right; max-width: 50%; margin: 0 0 30px 30px; }

ul.tx { list-style-image: url(bilder/pfeil.png); margin: 0 0 30px 30px; padding: 0; font-size: 1em; line-height: 1.5em; }
ul.tx li { margin-bottom: 10px; }
ol { margin: 0 0 30px 40px; padding: 0; font-size: 1em; line-height: 1.5em; }
ol.lower-latin { list-style-type: lower-latin; margin: 0 0 30px 40px; padding: 0; font-size: 1em; line-height: 1.5em; }
ol.lower-latin li { margin-bottom: 10px; }
ol.lower-latin ul { list-style-type: disc; margin: 10px 0 10px 40px; }

.referenz { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; }
.referenzbox { flex: 0 1 auto; width: 32%; margin: 0 0 30px 0; padding: 10px 0; color: #000; background-color: #d1ea8a; border: 1px solid #2e6eae; }
.referenzbox p { margin: 0 0 10px 0; padding: 0 10px; font-size: 0.87em; line-height: 1.2em; }
.referenzbox p.null { margin: 0; padding: 0 10px; }
.referenzbox:hover { background-color: #bad669; }
.referenzbox img { width: 100%; height: auto; }

.captioned-gallery10 { width: 100%; max-width: 1000px; margin: 0 0 50px 0; overflow: hidden; }
.captioned-gallery10 figure { margin: 0; }
.captioned-gallery10 figure.slider { position: relative; width: 1100%; font-size: 0; animation: 40s slidy2 infinite; }
.captioned-gallery10 figure.slider figure { width: 9.09%; height: auto; display: inline-block; position: inherit; }
.captioned-gallery10 figure.slider img { width: 100%; height: auto; }
.captioned-gallery10 figure.slider figure figcaption { position: absolute; bottom: 0; background-color: #105090; color: #fff; width: 100%; font-size: 1.6rem; padding: .6rem; opacity: 0.9; }
@keyframes slidy2 { 0% { left: 0%; } 7% { left: 0%; } 10% { left: -100%; } 17% { left: -100%; } 20% { left: -200%; } 27% { left: -200%; } 30% { left: -300%; } 37% { left: -300%; } 40% { left: -400%; } 47% { left: -400%; } 50% { left: -500%; } 57% { left: -500%; } 60% { left: -600%; } 67% { left: -600%; } 70% { left: -700%; } 77% { left: -700%; } 80% { left: -800%; } 87% { left: -800%; } 90% { left: -900%; } 97% { left: -900%; } 100% { left: -1000%; } }
.captioned-gallery10 a, .captioned-gallery10 a:link, .captioned-gallery10 a:visited { color: #fff; font-weight: 400; text-decoration: none; }
.captioned-gallery10 a:hover, .captioned-gallery10 a:active, .captioned-gallery10 a:focus  { color: #ffc361; text-decoration: none; }

@media only screen and (max-width: 1420px) {
header .container, nav .container, section .container, section .container2, footer .container { max-width: 98%; }
}
@media only screen and (max-width: 1190px) {
header .box35 { flex: 0 1 auto; width: 60%; }
header .box65 { flex: 0 1 auto; width: 38%; }
nav { position: relative; z-index: 1030; background-color: transparent; }
nav .container { text-align: right; }
.nav { z-index: 1030; background-color: #fff; border-bottom: 0; }
.active { display: block; }
a.toggleMenu { text-align: right; padding: 0; position: relative; line-height: 0.5em; }
a.toggleMenu span.bars { float: none; display: inline-block; position: relative; }
a.toggleMenu span.bars span { display: block; width: 50px; height: 5px; margin: 7px 1% 7px 0; border-radius: 6px; background-color: #b50000; transition-property: opacity, transform; transition: 1s; }
a.toggleMenu span.bars.aktiv span:nth-child(1) { transform: translateY(12px) rotate(-45deg); }
a.toggleMenu span.bars.aktiv span:nth-child(2) { opacity: 0; }
a.toggleMenu span.bars.aktiv span:nth-child(3) { transform: translateY(-12px) rotate(45deg); }
.nav { flex-direction: column; position: static; }
.nav > li { width: 100%; text-align: left; }
.nav a {  padding: 15px 20px; }
.nav li a { background-color: #fff; border-bottom: 1px dotted #b50000; border-left: 0; border-right: 0; }
nav li:last-child a {  border-right: 0; }
.gross { font-size: 2em; }
}
@media only screen and (max-width: 980px) {
header { position: relative; }
.flex { flex-direction: column; }
header .flex { flex-direction: row; }
.box50, .box70, .box30, .box32 { width: 100%; }
.oben a, .oben a:link, .oben a:visited { padding: 0; }
footer { position: static; }
footer p { margin: 0 0 30px 0; }
.gross { font-size: 2em; }
h1 { font-size: 1.8em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.3em; }
.big { font-size: 1.2em; }
.referenzbox { width: 48%; }
footer .container { padding: 20px; }
}
@media only screen and (max-width: 740px) {
body { font-size: 110%; }
section { position: relative; background: linear-gradient(to right, #fff 0%,#fff 5%,#fff 95%,#fff 100%); }
.container { padding: 50px 0; }
h1 { font-size: 1.8em; }
h2 { font-size: 1.5em; }
h3, .big { font-size: 1.2em; }
.bild { float: none; margin: 0 0 30px 0; max-width: 100%; }
.captioned-gallery10 figure.slider figure figcaption { font-size: 1.2rem; }
.right { float: none; }
footer .right { float: right; }
.left { float: none; }
}
@media only screen and (max-width: 600px) {
body { word-wrap: break-word; }
header .flex { flex-direction: column; }
header .box65 , header .box35 { width: 100%; }
nav .container { padding: 0 0 10px 0; }
.gross { font-size: 2em; }
.referenzbox { width: 100%; margin: 0 0 30px 0; }
}