@charset "UTF-8";
/*
Theme Name: <em>Thomas Beier</em>
Theme URI: https://www.thomasbeier.de
Description: TB Pinselstrich
Author: Stefanie Jung
*/
@media screen {
  @font-face {
    font-family: 'OutfitLight';
    src: url("fonts/Outfit-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap; }
  @font-face {
    font-family: 'OutfitMedium';
    src: url("fonts/Outfit-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap; }
  @font-face {
    font-family: 'JuliusSansOne';
    src: url(fonts/JuliusSansOne-Regular.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap; }
  /* --------------------------- Was man so braucht -------------------------- */
  /* --------------------------- All about Schrift --------------------------- */
  * {
    margin: 0;
    padding: 0;
    font-family: 'OutfitLight', sans-serif;
    outline: none;
    border: none; }

  html {
    margin: 0;
    padding: 0;
    font-family: 'OutfitLight', sans-serif;
    outline: none;
    border: none; }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'JuliusSansOne', sans-serif; }

  /* --------------------------------------
  --------------- 0. Basics ------------------
  ---------------------------------------*/
  body {
    background: url(images/bg-gunmetal.jpg) 0 0 repeat; }

  .wrapper {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto !important;
    display: block;
    background: #fff; }

  .center {
    margin: 0 auto;
    max-width: 1300px;
    width: 90%;
    padding: 0 5%; }

  .clear {
    clear: both; }

  .hide {
    text-indent: 200%;
    white-space: nowrap;
    overflow: hidden; }

  .left {
    float: left; }

  .right {
    float: right; }

  a {
    overflow: hidden;
    outline: none;
    text-decoration: none;
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -ms-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out; }

  ul {
    list-style-type: none; }

  ::selection {
    background: #555;
    color: #fff; }

  ::-moz-selection {
    background: #555;
    color: #fff; }

  /* --------------------------------------
  --------------- 1. Header ------------------
  ---------------------------------------*/
  header {
    position: relative;
    padding-bottom: 20px;
    /*@media screen and (max-width: 360px) { height:280px; } 
    @media screen and (max-width: 320px) { height:265px; }*/
    /* h1 ende */
    /* subnavi ende */
    /* trenner ende */
    /* header top ende */
    /* nav main ende */
    /* nav small ende */ } }
  @media screen and (max-width: 640px) {
    header {
      height: 400px; } }
  @media screen and (max-width: 480px) {
    header {
      height: 315px; } }
  @media screen and (max-width: 414px) {
    header {
      height: 250px; } }
  @media screen and (max-width: 640px) {
    header #header-top {
      position: fixed;
      top: 0;
      z-index: 5;
      width: 100%;
      background: #fff;
      height: 100px; } }
@media screen {
    header .center {
      display: flex;
      justify-content: space-between;
      align-items: center; }
    header a.logo {
      display: block;
      padding-top: 40px;
      width: 38%;
      max-height: 120px;
      max-width: 380px;
      float: left; } }
    @media screen and (max-width: 640px) {
      header a.logo {
        padding: 15px 0 0 15px;
        width: 35%; } }
    @media screen and (max-width: 480px) {
      header a.logo {
        padding: 25px 0 0 15px;
        width: 155px; } }
@media screen {
      header a.logo img {
        width: 100%;
        height: auto; }
    header #subnavi {
      padding-top: 4%;
      /* li ende */ } }
    @media screen and (max-width: 640px) {
      header #subnavi {
        display: none; } }
@media screen {
      header #subnavi li {
        /* a ende */ }
        header #subnavi li a {
          display: block; }
          header #subnavi li a img {
            height: 150px;
            width: auto; }
    header #trenner {
      width: 100%;
      height: 8px;
      background: #e8e8e8;
      margin: 3% auto 15px;
      /* ul ende */ } }
    @media screen and (max-width: 640px) {
      header #trenner {
        margin: 0;
        bottom: 0;
        position: absolute; } }
@media screen {
      header #trenner ul {
        float: right;
        width: 100%; }
        header #trenner ul li {
          float: right;
          height: 8px;
          width: 5%; }
          header #trenner ul li.first {
            background: #BE1522; }
          header #trenner ul li.second {
            background: #F8EA1B; }
          header #trenner ul li.third {
            background: #009fe3; }
    header nav#main {
      width: 100%;
      /* ul nav main ende */ } }
    @media screen and (max-width: 640px) {
      header nav#main {
        display: none; } }
@media screen {
      header nav#main ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        gap: 0 20px;
        /* a ende */
        /* subnav ul */
        /* ul subnav ende */ }
        header nav#main ul li.sub {
          position: relative; }
        header nav#main ul a {
          color: #aaa;
          font-size: 16px;
          line-height: 42px;
          display: block;
          text-decoration: none;
          /* fb ende */ }
          header nav#main ul a span.sf-sub-indicator {
            background-image: url("/images/sprite.png");
            background-repeat: no-repeat;
            background-position: -7px -165px;
            width: 30px;
            height: 16px; }
          header nav#main ul a.fb {
            text-indent: 200%;
            white-space: nowrap;
            overflow: hidden;
            height: 35px;
            width: 35px;
            opacity: 0.8;
            background: url("images/Facebook_Logo.png") 0 0 no-repeat; }
            header nav#main ul a.fb:hover, header nav#main ul a.fb:active {
              opacity: 0.6; }
          header nav#main ul a:hover, header nav#main ul a:active, body.index header nav#main ul a.index, body.home header nav#main ul a.index, body.malermeister-beier header nav#main ul a.malermeister-beier, body.malerarbeiten header nav#main ul a.malerarbeiten, body.innenraumgestaltung header nav#main ul a.innenraumgestaltung, body.waende-streichen header nav#main ul a.innenraumgestaltung, body.tapezierarbeiten header nav#main ul a.innenraumgestaltung, body.waende-verputzen header nav#main ul a.innenraumgestaltung, body.trockenbau header nav#main ul a.innenraumgestaltung, body.fassadenarbeiten header nav#main ul a.fassadenarbeiten, body.referenzen header nav#main ul a.referenzen, body.kontakt-malerbetrieb header nav#main ul a.kontakt {
            color: #747373;
            text-decoration: underline; }
        header nav#main ul ul {
          display: none;
          background: #fff;
          padding: 8% 15%;
          width: max-content;
          position: absolute;
          top: 42px;
          left: 0;
          z-index: 100;
          /* li ende */ }
          header nav#main ul ul li {
            padding: 10px 0;
            /* a ende */ }
            header nav#main ul ul li a {
              color: #aaa;
              font-size: 16px;
              padding: 0;
              display: block;
              line-height: 24px; }
              header nav#main ul ul li a:hover, header nav#main ul ul li a:active, body.waende-streichen header nav#main ul ul li a.waende-streichen, body.tapezierarbeiten header nav#main ul ul li a.tapezierarbeiten, body.waende-verputzen header nav#main ul ul li a.waende-verputzen, body.trockenbau header nav#main ul ul li a.trockenbau {
                color: #747373; }
    header #nav-small {
      display: none;
      float: right;
      padding: 25px 15px 0 0;
      list-style-type: none;
      /* div a ende */ } }
    @media screen and (max-width: 640px) {
      header #nav-small {
        display: block; } }
@media screen {
      header #nav-small li {
        float: left; }
      header #nav-small div, header #nav-small a {
        display: block;
        width: 45px;
        height: 45px;
        margin-left: 5px;
        cursor: pointer;
        background: url("/images/nav-small.png") no-repeat; }
      header #nav-small #open-nav {
        background-position: 0 0; }
        header #nav-small #open-nav:hover, header #nav-small #open-nav:active {
          background-position: 0 -45px; }
      header #nav-small #close-nav {
        display: none;
        background-position: -45px 0; }
        header #nav-small #close-nav:hover, header #nav-small #close-nav:active {
          display: none;
          background-position: -45px -45px; }
      header #nav-small #contact {
        background-position: -90px 0; }
        header #nav-small #contact:hover, header #nav-small #contact:active {
          background-position: -90px -45px; }

  /* header ende */
  #mobile-Nav {
    position: fixed;
    left: -215px;
    height: 100%;
    width: 215px;
    z-index: 3;
    background: #fff;
    background: rgba(255, 255, 255, 0.95);
    overflow: auto;
    /* a ende */
    /* cmain ende */
    /* sMedia ende */ }
    #mobile-Nav ul {
      width: auto; }
    #mobile-Nav span, #mobile-Nav br {
      display: none; }
    #mobile-Nav a {
      color: #aaa;
      font-size: 14px;
      padding: 10px 0 10px 10%;
      text-decoration: none;
      line-height: 26px;
      display: block;
      /* hover ende */ }
      #mobile-Nav a:hover, #mobile-Nav a:active, body.index #mobile-Nav a.index, body.ueber-uns #mobile-Nav a.ueber-uns, body.angebot #mobile-Nav a.angebot, body.referenzen #mobile-Nav a.referenzen, body.kontakt-malerbetrieb #mobile-Nav a.kontakt, body.impressum #mobile-Nav a.impressum, body.datenschutz #mobile-Nav a.datenschutz {
        color: #747373;
        text-decoration: underline !important; }
    #mobile-Nav #cMain {
      overflow: hidden;
      margin-top: 60px; }
      #mobile-Nav #cMain nav#main {
        display: block;
        width: 90%; }
        #mobile-Nav #cMain nav#main li.sub ul {
          display: block !important;
          visibility: visible !important; }
          #mobile-Nav #cMain nav#main li.sub ul a {
            padding: 4px 0 4px 15%; }
        #mobile-Nav #cMain nav#main a.fb {
          display: none; }
    #mobile-Nav #sMedia {
      border-top: 1px solid #e8e8e8;
      width: auto;
      margin-top: 10px;
      padding: 10px 0 5px 10%;
      /* ul ende */ }
      #mobile-Nav #sMedia p {
        font-size: 12px;
        color: #747373;
        margin-bottom: 7px;
        text-transform: uppercase; }
      #mobile-Nav #sMedia ul {
        width: 100%;
        overflow: hidden;
        /* li ende */ }
        #mobile-Nav #sMedia ul li {
          float: left;
          padding: 0 4% 0 0;
          /* a ende */ }
          #mobile-Nav #sMedia ul li a {
            padding: 0;
            height: 35px;
            width: 35px;
            display: block;
            text-indent: 100%;
            white-space: nowrap;
            overflow: hidden;
            background: url("images/Facebook_Logo.png") 0 0 no-repeat; }
            #mobile-Nav #sMedia ul li a:hover, #mobile-Nav #sMedia ul li a:active {
              opacity: 0.8; }

  /* mobile-Nav ende */
  /* --------------------------------------
  --------------- 3. Content --------------
  ---------------------------------------*/
  content {
    /* h1 ende */ }
    content .center {
      padding-top: 60px; }
    content .headline h2 {
      padding-left: 20px; } }
    @media screen and (max-width: 640px) {
      content .headline h2 {
        padding-left: 0; } }
@media screen {
    content h1 {
      color: #555;
      font-size: 34px;
      line-height: 50px; } }
    @media screen and (max-width: 640px) {
      content h1 {
        font-size: 30px;
        line-height: 50px; } }
    @media screen and (max-width: 414px) {
      content h1 {
        font-size: 28px;
        line-height: 40px; } }
@media screen {
    content h2 {
      color: #aaa;
      font-size: 26px;
      margin-bottom: 30px;
      line-height: 30px; } }
    @media screen and (max-width: 640px) {
      content h2 {
        font-size: 24px; } }
    @media screen and (max-width: 414px) {
      content h2 {
        font-size: 22px;
        line-height: 28px; } }
@media screen {
    content h3 {
      color: #555;
      font-size: 24px;
      margin-bottom: 10px;
      line-height: 30px; } }
    @media screen and (max-width: 640px) {
      content h3 {
        font-size: 20px;
        line-height: 28px; } }
    @media screen and (max-width: 414px) {
      content h3 {
        font-size: 18px;
        line-height: 26px; } }
@media screen {
    content h4, content h5, content h6 {
      font-family: 'JuliusSansOne', sans-serif;
      color: #747373;
      font-size: 20px;
      margin-bottom: 10px; }
    content p, content ul, content span {
      color: #747373;
      font-size: 16px;
      line-height: 28px;
      margin-bottom: 20px; }
    content a {
      color: #aaa;
      border-bottom: 1px dotted #aaa;
      text-decoration: none; }
      content a:hover, content a:active {
        color: #009fe3;
        border-bottom: 1px dotted #009fe3; }
    content ul.liste li {
      padding-left: 20px;
      background: url("/images/required.png") -3px 5px no-repeat; }

  /* content ende */
  /* --------------------------------------
  --------------- 4. Footer ---------------
  ---------------------------------------*/
  footer {
    width: 100%;
    /* ul ende */ }
    footer ul {
      display: table;
      margin: 0 auto;
      padding-bottom: 20px;
      padding-top: 50px;
      width: 78%;
      /* li ende */ } }
    @media screen and (max-width: 640px) {
      footer ul {
        width: 100%; } }
@media screen {
      footer ul li {
        float: left;
        margin: 0 5px;
        color: #747373;
        font-size: 12px;
        display: inline-block;
        line-height: 20px;
        /* a ende */ }
        footer ul li a {
          color: #aaa;
          text-decoration: underline; }
          footer ul li a:hover, footer ul li a:active {
            color: #009fe3; }

  /* footer ende */
  /* Slider */
  .slick-slider {
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    top: 20px;
    left: 0;
    max-width: 1400px;
    height: auto;
    overflow: hidden;
    max-height: 465px;
    margin: 0 auto; }

  .slick-slider button {
    display: none; } }
@media screen and (max-width: 800px) {
  .slick-slider {
    max-height: 280px; } }
@media screen and (max-width: 640px) {
  .slick-slider {
    max-height: 220px;
    top: 130px; } }
@media screen and (max-width: 480px) {
  .slick-slider {
    max-height: 165px; } }
@media screen and (max-width: 414px) {
  .slick-slider {
    top: 110px; } }
@media screen and (max-width: 360px) {
  .slick-slider {
    max-height: 135px; } }
@media screen and (max-width: 320px) {
  .slick-slider {
    max-height: 120px; } }
@media screen {
  .slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;
    height: 400px; }

  .slick-list :focus {
    outline: none; }

  .slick-list .dragging {
    cursor: pointer;
    cursor: hand; }

  .slick-slider .slick-track,
  .slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }

  .slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block; }

  .slick-track:before,
  .slick-track:after {
    content: "";
    display: table; }

  .slick-track:after {
    clear: both; }

  .slick-loading .slick-track {
    visibility: hidden; }

  .slick-slide {
    height: 400px !important;
    overflow: hidden;
    display: block !important;
    padding: 0;
    float: left;
    width: 100%; }

  .slick-slide img {
    display: block;
    width: 100%;
    /* max-width:1200px;*/
    height: auto;
    max-height: 465px;
    margin: 0 auto; }

  .slick-slide .slick-loading img {
    display: none; }

  .slick-slide .dragging img {
    pointer-events: none; }

  .slick-slide .slick-initialized {
    display: block; }

  .slick-slide .slick-loading {
    visibility: hidden; }

  .slick-slide .slick-vertical {
    display: block;
    height: auto;
    border: 1px solid transparent; }

  .slick-prev, .slick-next {
    display: none !important; }

  /*@import '_formular.scss';*/
  /* ################################ WP Anpassungen #################### */
  :where(.wp-block-columns.is-layout-flex) {
    gap: 4em !important; }

  /* WP Formularanpassungen */
  .wpforms-container {
    /* label */ }
    .wpforms-container .wpforms-field-label,
    .wpforms-container .wp-core-ui div.wpforms-container .wpforms-field-label {
      font-size: 16px !important;
      color: #555 !important; }
      .wpforms-container .wpforms-field-label .wpforms-required-label,
      .wpforms-container .wp-core-ui div.wpforms-container .wpforms-field-label .wpforms-required-label {
        color: #747373; }
    .wpforms-container.wpforms-container-full input[type=submit], .wpforms-container.wpforms-container-full button[type=submit], .wpforms-container.wpforms-container-full .wpforms-page-button,
    .wpforms-container .wp-core-ui div.wpforms-container-full input[type=submit],
    .wpforms-container .wp-core-ui div.wpforms-container-full button[type=submit],
    .wpforms-container .wp-core-ui div.wpforms-container-full .wpforms-page-button, .wpforms-container.wpforms-container-full input[type=submit]:not(:hover):not(:active), .wpforms-container.wpforms-container-full button[type=submit]:not(:hover):not(:active), .wpforms-container.wpforms-container-full .wpforms-page-button:not(:hover):not(:active),
    .wpforms-container .wp-core-ui div.wpforms-container-full input[type=submit]:not(:hover):not(:active),
    .wpforms-container .wp-core-ui div.wpforms-container-full button[type=submit]:not(:hover):not(:active),
    .wpforms-container .wp-core-ui div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active) {
      background-color: transparent !important;
      color: #555;
      font-size: 24px;
      font-weight: 500; }
      .wpforms-container.wpforms-container-full input[type=submit]:hover, .wpforms-container.wpforms-container-full input[type=submit]:active, .wpforms-container.wpforms-container-full button[type=submit]:hover, .wpforms-container.wpforms-container-full button[type=submit]:active, .wpforms-container.wpforms-container-full .wpforms-page-button:hover, .wpforms-container.wpforms-container-full .wpforms-page-button:active,
      .wpforms-container .wp-core-ui div.wpforms-container-full input[type=submit]:hover,
      .wpforms-container .wp-core-ui div.wpforms-container-full input[type=submit]:active,
      .wpforms-container .wp-core-ui div.wpforms-container-full button[type=submit]:hover,
      .wpforms-container .wp-core-ui div.wpforms-container-full button[type=submit]:active,
      .wpforms-container .wp-core-ui div.wpforms-container-full .wpforms-page-button:hover,
      .wpforms-container .wp-core-ui div.wpforms-container-full .wpforms-page-button:active, .wpforms-container.wpforms-container-full input[type=submit]:not(:hover):not(:active):hover, .wpforms-container.wpforms-container-full input[type=submit]:not(:hover):not(:active):active, .wpforms-container.wpforms-container-full button[type=submit]:not(:hover):not(:active):hover, .wpforms-container.wpforms-container-full button[type=submit]:not(:hover):not(:active):active, .wpforms-container.wpforms-container-full .wpforms-page-button:not(:hover):not(:active):hover, .wpforms-container.wpforms-container-full .wpforms-page-button:not(:hover):not(:active):active,
      .wpforms-container .wp-core-ui div.wpforms-container-full input[type=submit]:not(:hover):not(:active):hover,
      .wpforms-container .wp-core-ui div.wpforms-container-full input[type=submit]:not(:hover):not(:active):active,
      .wpforms-container .wp-core-ui div.wpforms-container-full button[type=submit]:not(:hover):not(:active):hover,
      .wpforms-container .wp-core-ui div.wpforms-container-full button[type=submit]:not(:hover):not(:active):active,
      .wpforms-container .wp-core-ui div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active):hover,
      .wpforms-container .wp-core-ui div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active):active {
        background-color: transparent !important; }
    .wpforms-container.wpforms-container-full input[type=submit]:hover, .wpforms-container.wpforms-container-full input[type=submit]:active, .wpforms-container.wpforms-container-full button[type=submit]:hover, .wpforms-container.wpforms-container-full button[type=submit]:active, .wpforms-container.wpforms-container-full .wpforms-page-button:hover, .wpforms-container.wpforms-container-full .wpforms-page-button:active,
    .wpforms-container .wp-core-ui div.wpforms-container-full input[type=submit]:hover,
    .wpforms-container .wp-core-ui div.wpforms-container-full input[type=submit]:active,
    .wpforms-container .wp-core-ui div.wpforms-container-full button[type=submit]:hover,
    .wpforms-container .wp-core-ui div.wpforms-container-full button[type=submit]:active,
    .wpforms-container .wp-core-ui div.wpforms-container-full .wpforms-page-button:hover,
    .wpforms-container .wp-core-ui div.wpforms-container-full .wpforms-page-button:active {
      background: none; } }
  @media screen and (max-width: 780px) {
    .wpforms-container .wpforms-field.wpforms-one-half {
      margin-left: 0; }
    .wpforms-container .wpforms-one-half,
    .wpforms-container .wpforms-three-sixths,
    .wpforms-container .wpforms-two-fourths {
      width: 100% !important;
      margin: 0 !important; } }

@media screen {
  /* contaier ende */ }
/* screen ende */
/*#####################
####### RETINA  #####
#######################*/
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  header #nav-small li #open-nav,
  header #nav-small li #close-nav,
  header #nav-small li a#contact {
    background-image: url("/images/nav-small@2x.png");
    background-size: 135px 90px; } }
/* --------------------------------------
--------------- 5. Print ------------------
---------------------------------------*/
@media print {
  * {
    background: #fff;
    color: #000; }

  html {
    font: 100%/1.5 Arial, Helvetica, sans-serif; }

  /*--- Schriftart ggf. ändern ---*/
  nav, #subnavi, form {
    display: none; }

  /*--- Bsp.: Navigation, Sidebars, Footer... ---*/ }