/*
Projekt       : Oktopus Bürodienste
Komponente    : Wordpress
Datei         : style.css
Beschreibung  : Spezielle Anpassungen des Templates "graphy" für die website "oktopus-buero.de"
Author:         Gernot Daum
Author URI:     http://Datenwege-Informatik.de
Template:       graphy
Version:        1.0
Historie
   05.10.18  Gernot Daum  Beginn der Implementierung
   09.01.23  Gernot Daum  Austausch von Fonts
*/


/* Allgemein */
@font-face {
  font-family: 'HK Grotesk-Light';
  font-style: normal;
  src: url('assets/fonts/HKGrotesk-Light.woff2') format('woff2'), 
       url('assets/fonts/HKGrotesk-Light.woff') format('woff'), 
       url('assets/fonts/HKGrotesk-Light.ttf') format('truetype'), 
       url('assets/fonts/HKGrotesk-Light.eot') format('embedded-opentype');
}
@font-face {
  font-family: 'Numans Regular';
  font-style: normal;
  src: url('assets/fonts/Numans-Regular.woff2') format('woff2'), 
       url('assets/fonts/Numans-Regular.woff') format('woff'), 
       url('assets/fonts/Numans-Regular.ttf') format('truetype'), 
       url('assets/fonts/Numans-Regular.eot') format('embedded-opentype');
}
* {font-family: 'HK Grotesk-Light', Arial, sans-serif}
body {background: #f9f9f9} 
#masthead, #content, #colophon {
  margin: 0 auto; 
  padding: 30px; 
  max-width: 1440px;
	background: #fff;
	box-shadow: 1px 2px 3px rgba(190, 190, 190, 0.5)
}
#masthead, #content {margin-bottom: 60px}
#masthead {margin-top: 30px}
#colophon {margin-bottom: 30px}
h1, h2, h3, h4, h5, h6, .site-title {font-family: 'Numans Regular', Arial, sans-serif}
h1, h2, h3 {text-align: center}
h1, .entry-title {font-size: 30px; xmargin-top: 30px; margin-bottom: 15px}
h2, .site-description {font-size: 24px; margin-top: 24px; margin-bottom: 12px}
h3 {font-size: 20px; margin-top: 20px; margin-bottom: 10px}
p, ul, .widget ul {margin: 0 0 15px 0}
p.listcaption {margin-bottom: 5px}
.site-contact {margin-top: 15px}
.site-contact a {color: #eb593d; text-decoration: underline}
.site-contact a:hover {color: #ec9301}
a.link img:hover{opacity: 0.8}
.tight {max-width: 1040px; margin: 0 auto}
.actual {padding: 15px; border: 3px solid #eb593d}
#content .notopm {margin-top: 0}
#content .topm30 {margin-top: 30px}
.only-small {display: none}
.underwriting {display: block; text-align: center; font-weight: bold; font-size: 14px; letter-spacing: 1px}
.widget {font-size: 16px}
.widget ul {
	list-style: initial;
	list-style-position: inside;
	list-style-image: url("/wp-content/themes/graphy-oktopus/21_Icons/Leg4.png")
}
.tight {max-width: 1140px; margin: 0 auto}
.clearfix:after {content: "."; clear: both; display: block; visibility: hidden; height: 0px}
/*  Seitenbreiten */
.narrow {max-width: 960px; margin: 0 auto}
.single-track {max-width: 800px; margin: 0 auto}
.max500 {max-width: 500px; margin: 0 auto}

/* Logo Stilelemente */
.widget ul.leg1, .widget li.leg1 {list-style-image: url("/wp-content/themes/graphy-oktopus/21_Icons/Leg1.jpg")}
.widget ul.leg2, .widget li.leg2 {list-style-image: url("/wp-content/themes/graphy-oktopus/21_Icons/Leg2.jpg")}
.widget ul.leg3, .widget li.leg3 {list-style-image: url("/wp-content/themes/graphy-oktopus/21_Icons/Leg3.jpg")}
.widget ul.leg4, .widget li.leg4 {list-style-image: url("/wp-content/themes/graphy-oktopus/21_Icons/Leg4.png")}
.widget ul.leg5, .widget li.leg5 {list-style-image: url("/wp-content/themes/graphy-oktopus/21_Icons/Leg5.jpg")}
.widget li {padding: 0 0 6px 0; border-top: none}
blockquote p {padding: 0 15% 0 7%; text-align: center}
blockquote p::before {left: -3%}
blockquote::after {
  position: absolute;
  top: 70%;
  left: 92%;
  content: "\201D";
  font-family: Georgia, serif;
  color: #ccc;
  font-size: 84px;
  line-height: 90px
}
blockquote.leg1::before, blockquote.leg1::after {color: #eb593d}
blockquote.leg2::before, blockquote.leg2::after {color: #ec9301}
blockquote.leg3::before, blockquote.leg3::after {color: #5bc5f0}
blockquote.leg4::before, blockquote.leg4::after {color: #a5c71a}
blockquote.leg5::before, blockquote.leg5::after {color: #f4d919}
.postit {
	width: 60%;
	margin: 0 auto;
	padding: 15px 30px; 
	background: #FDF59A;
	box-shadow: 1px 2px 3px rgba(190, 190, 190, 0.5)
}

/* Kopf */
.site-title {font-size: 36px}
.site-description {
	margin: 15px;
  color: #777;
  font-size: 30px;
  font-style: normal
}
.site-branding {padding: 30px 0}
.site-branding-left, .site-branding-right {float: left}
.site-branding-left {width: 38.2%}
.site-branding-right {width: 61.8%; margin-top: 0}
.site-logo img {max-height: 150px}
.header-image img {
	display: block; 
	margin: 0 auto;
}
.main-navigation ul.menu > li.telnumber {color: #ffffff; background: #eb593d}
.main-navigation li.telnumber a:hover {color: #ffffff; background: #ec9301}
.search-form {display: none}

/* Fuss */
.site-bottom {
	width: 100%; 
  max-width: none; 
  margin: 0; 
  border: none;
  text-align: left;
  font-size: 14px
}
.site-info, .footermenu {float: left; width: 50%}
#colophon .widget {margin-bottom: 0}
#colophon .widget-area {padding-top: 30px}
#menu-fussnavigation li {
	display: inline;
	border-top: none;
	padding: 15px 20px
}
#menu-fussnavigation li:first-child {padding-left: 0}
#menu-fussnavigation .current-menu-item > a {color: #eb593d}
#menu-fussnavigation a:hover {color: #ec9301}
.local-information {
	text-align: left; 
	font-family: 'HK Grotesk-Light', Arial, sans-serif;
	font-size: 14px
}

/* Spaltenlayout */
.Vollseite, .Halbseite, .HalbseiteL, .HalbseiteR, .Halbbox, 
.Dreiviertelseite, .Drittelseite, .Drittelbox, .Zweidrittelseite, .Zweidrittelbox, 
.Viertelseite, .Viertelbox, .ReferencePortraitLeft, .ReferencePortraitRight
{float: left; margin: 0}
.Vollseite {width: 100%}
.Dreiviertelseite {	width: 75%}
.Zweidrittelseite, .Zweidrittelbox {width: 66.66%}
.Halbseite, .HalbseiteL, .HalbseiteR, .Halbbox {width: 50%}
.Drittelseite, .Drittelbox {width: 33.33%}
.Viertelseite, .Viertelbox {width: 25%}
.newline {clear: both}

/* Bildpositionierung */
.Fill1, .Fill1Flex {display: block; width: 10%; margin: 0 auto}
.Fill2, .Fill2Flex {display: block; width: 20%;	margin: 0 auto}
.Fill3, .Fill3Flex {display: block; width: 30%; margin: 0 auto}
.Fill4, .Fill4Flex {display: block; width: 40%;	margin: 0 auto}
.Fill5, .Fill5Flex {display: block; width: 50%;	margin: 0 auto}
.Fill6, .Fill6Flex {display: block; width: 60%;	margin: 0 auto}
.Fill7, .Fill7Flex {display: block; width: 70%;	margin: 0 auto}
.Fill8, .Fill8Flex {display: block; width: 80%;	margin: 0 auto}
.Fill9, .Fill9Flex {display: block; width: 90%;	margin: 0 auto}
.Fill  {width: 100%}

/* Tabellen */
.valuepairs {margin-bottom: 15px}
.valuepairs:after {content: "."; clear: both; display: block; visibility: hidden; height: 0px}
.valuepairs div {float: left; padding: 2px 12px 2px 0}
.valuepairs .name {clear: left; width: calc(40% - 12px)}
.valuepairs .value {width: calc(60% - 12px)}

/* Kacheln */
.tilea1 {
	float: left;
	margin: 0;
	width: 100%;
  text-align: center;
  hyphens: none
}
.tilea1 .frame {
	position: relative;
	overflow: hidden;
	width: 100%
}
.tilea1 .anim {
	position: absolute;
	width: 90%;
	height: 100%;
	left: 5%;
	top: 70%;
  transition: top 0.3s;
}
.tilea1 .anim h3 {
	margin-top: 5px;
	font-size: 24px;
	color: rgba(255, 255, 255, 1.0);
	transition: margin-top 0.3s
}
.tilea1 .anim h4 {
	margin-top: 20%;
	padding: 0 15px;
	font-size: 16px;
	color: rgba(255, 255, 255, 1.0);
	line-height: 28px;
	transition: margin-top 0.3s
}
.unterschrift p {margin: 0}
.tilea1:hover .anim {top: 0}
.tilea1:hover .anim h3 {background: transparent}
.tilea1:hover .anim h4 {margin-top: 0}
.Organisation .anim h3, .Organisation .tilea1:hover .anim, .Leg1 .anim h3, .Leg1 .tilea1:hover .anim 
{background: rgba(235, 89, 61, 0.9)}
.Finanzen .anim h3, .Finanzen .tilea1:hover .anim, .Leg2 .anim h3, .Leg2 .tilea1:hover .anim
{background: rgba(236, 146, 1, 0.9)}
.Kommunikation .anim h3, .Kommunikation .tilea1:hover .anim, .Leg3 .anim h3, .Leg3 .tilea1:hover .anim 
{background: rgba(91, 147, 240, 0.9)}
.Leg4 .anim h3, .Leg4 .tilea1:hover .anim {background: rgba(165, 199, 26, 0.9)}
.Leg5 .anim h3, .Leg5 .tilea1:hover .anim {background: rgba(244, 217, 25, 0.9)}
.tilea1 ul li {
	padding: 2px 0;
  list-style: initial;
  border-top: none
}


/* Google Maps */
div#googleMap {
	width: 40em; 
	height: 32em;  
	margin: 15px auto
}


/* Responsive */

/* Maximum  */
@media screen and (max-width: 1320px) {
  .tilea1 img {margin-bottom: 30px}
}

/* Kleiner PC Bildschirm  */
@media screen and (max-width: 1180px) {
  .tilea1 img {margin-bottom: 50px}
  .site-title {font-size: 30px}
  h1, .entry-title {font-size: 28px; margin-top: 28px; margin-bottom: 14px}
  h2, .site-description {font-size: 22px; margin-top: 22px; margin-bottom: 11px}
  h3 {font-size: 19px; margin-top: 18px; margin-bottom: 9px}
  .postit {width: 75%}
	div#googleMap {width: 36em; height: 30em}  
}

/* Tablett Landscape */
@media screen and (max-width: 980px) {
	.widescreen {display: none}
  .site-branding-left, .site-branding-right {width: 100%}
	.main-navigation a {padding-left: 10px; padding-right: 10px; font-size: 14px}
	.Halbseite, .Drittelseite {width: 100%}
	.Fill7Flex {width: 80%}
  #content .panel-grid {flex-direction: column}
  #content .panel-grid-cell {width: 80%; margin: 0 auto}
  .tilea1 {display: block; float: none; width: 80%; margin: 0 auto 30px auto}
  .postit {width: 90%}
	div#googleMap {width: 40em; height: 32em}  
}

/* Tablett Portrait / großer Umbruch */
@media screen and (max-width: 783px) {
	.site-info, .footermenu {width: 100%; margin: 15px 0}
  .site-title {font-size: 24px}
  h1, .entry-title {font-size: 22px; margin-top: 22px; margin-bottom: 11px}
  h2, .site-description {font-size: 20px; margin-top: 20px; margin-bottom: 10px}
  h3 {font-size: 18px}
	.Fill7Flex {width: 90%}
	div#googleMap {width: 36em; height: 30em} 
	/*   Raster reduzieren / vertikale Abstände verkleinern */
	#masthead {margin-top: 15px}
  #masthead, #content, .content-area, .page .hentry {margin-bottom: 15px}
	#masthead, #content, #colophon {padding: 0 15px} 
  #content .mobiletopm {margin-top: 15px}
  .postit {width: 60%}
	/*   Zitate */
	blockquote {padding: 0 5%}
	blockquote p {padding: 0 7%}
	blockquote p::before {left: 0}
  blockquote::before, blockquote::after {font-size: 48px; line-height: 54px}
  blockquote::before {left: 5%}
}

/* Smartphone groß */
@media screen and (max-width: 640px) {
	.Fill7Flex {width: 100%}
  .tilea1 {width: 100%}
  .postit {width: 70%}
	div#googleMap {width: 30em; height: 28em}  
}

/*  Smartphone */
@media screen and (max-width: 540px) {
  .postit {width: 80%}
	div#googleMap {width: 22em}  
}

/*  Smartphone klein  */
@media screen and (max-width: 400px) {
  .only-small {display: initial}
	div#googleMap {width: 17em}  
}

/*  Smartphone sehr klein  */
@media screen and (max-width: 320px) {
	div#googleMap {width: 15em}  
}