/* 
    Theme Name: Pyouuu
    Author: Ute Schimming
    Author URI: 
    Description: Pyouuu eignet sich besonders für den Gebrauch individueller Portfolio Webseiten. Das Theme zeichnet sich besonders durch seine vielen mehrfarbig einstellbaren Templates aus. (Empfehlungen für die jeweiligen Seiten sind im Backend gegeben) Die Farben sind im Header und Footer abgestimmt. Farben wie bordeaux, dunkelblau, petrol, goldgelb, grün oder Terracotta stehen zur Auswahl. 
    Gleichzeitig verfügt das Theme über mehrere Menüleisten.Für ein individuelles Portfolio mit einem schönen Farbklecks bietet sich dieses Theme wunderbar an. Es ist zeitgemäss, modern und ein schöner Hingucker für jedes Auge. 
    Tags: portfolio, farbige Templates
    Version: 
    Requires alt least: 5.0
    Tested up to: 6.0
    Requires PHP:7.0
    Text Domain: Pyouuu
*/

/**
 *
 * directory
 * 
 * browser-reset
 * font-family (@font-face)
 * css-variables (:root)
 * basic elements
 * structure (layout grid)
 * header
 * navigation
 * content
 * sidebar
 * footer
 * templates
 * comments
 * special content (plugins)
  @media Big Phone 
 * @media tablet
 * @media desktop
 *
 */

/****************************************************************************
 *****************************************************************************
 * ''''''''''''''''''''''   browser-reset    ************** ******************
 ****************************************************************************
 *****************************************************************************/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  hyphens: auto;
}

body {
  min-height: 100vh;
}

/****************************************************************************
*****************************************************************************
* ''''''''''''''''''''''   font-family (@font-face)  ************** ******************
****************************************************************************
*****************************************************************************/

/* ***********************           amiri-regular - latin  Überschriften ******************/
@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/amiri-v24-latin-regular.eot"); /* IE9 Compat Modes */
  src: local(""),
    url("../fonts/amiri-v24-latin-regular.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/amiri-v24-latin-regular.woff2") format("woff2"),
    /* Super Modern Browsers */ url("../fonts/amiri-v24-latin-regular.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/amiri-v24-latin-regular.ttf")
      format("truetype"),
    /* Safari, Android, iOS */ url("../fonts/amiri-v24-latin-regular.svg#Amiri")
      format("svg"); /* Legacy iOS */
}
/* amiri-italic - latin */
@font-face {
  font-family: "Amiri";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/amiri-v24-latin-italic.eot"); /* IE9 Compat Modes */
  src: local(""),
    url("../fonts/amiri-v24-latin-italic.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/amiri-v24-latin-italic.woff2") format("woff2"),
    /* Super Modern Browsers */ url("../fonts/amiri-v24-latin-italic.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/amiri-v24-latin-italic.ttf")
      format("truetype"),
    /* Safari, Android, iOS */ url("../fonts/amiri-v24-latin-italic.svg#Amiri")
      format("svg"); /* Legacy iOS */
}
/* amiri-700italic - latin */
@font-face {
  font-family: "Amiri";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/amiri-v24-latin-700italic.eot"); /* IE9 Compat Modes */
  src: local(""),
    url("../fonts/amiri-v24-latin-700italic.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/amiri-v24-latin-700italic.woff2")
      format("woff2"),
    /* Super Modern Browsers */ url("../fonts/amiri-v24-latin-700italic.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/amiri-v24-latin-700italic.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/amiri-v24-latin-700italic.svg#Amiri") format("svg"); /* Legacy iOS */
}
/* amiri-700 - latin */
@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/amiri-v24-latin-700.eot"); /* IE9 Compat Modes */
  src: local(""),
    url("../fonts/amiri-v24-latin-700.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/amiri-v24-latin-700.woff2") format("woff2"),
    /* Super Modern Browsers */ url("../fonts/amiri-v24-latin-700.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/amiri-v24-latin-700.ttf")
      format("truetype"),
    /* Safari, Android, iOS */ url("../fonts/amiri-v24-latin-700.svg#Amiri")
      format("svg"); /* Legacy iOS */
}

/* **************************
**************************flamenco-300 - latin 
                                                          *****************/

@font-face {
  font-family: "Flamenco";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/flamenco-v18-latin-300.eot"); /* IE9 Compat Modes */
  src: local(""),
    url("../fonts/flamenco-v18-latin-300.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/flamenco-v18-latin-300.woff2") format("woff2"),
    /* Super Modern Browsers */ url("../fonts/flamenco-v18-latin-300.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/flamenco-v18-latin-300.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/flamenco-v18-latin-300.svg#Flamenco") format("svg"); /* Legacy iOS */
}
/* flamenco-regular - latin */
@font-face {
  font-family: "Flamenco";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/flamenco-v18-latin-regular.eot"); /* IE9 Compat Modes */
  src: local(""),
    url("../fonts/flamenco-v18-latin-regular.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/flamenco-v18-latin-regular.woff2")
      format("woff2"),
    /* Super Modern Browsers */ url("../fonts/flamenco-v18-latin-regular.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/flamenco-v18-latin-regular.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/flamenco-v18-latin-regular.svg#Flamenco") format("svg"); /* Legacy iOS */
}

/****************************************************************************
*****************************************************************************
* ''''''''''''''''''''''   css-variables (:root)  ************** ******************
****************************************************************************
*****************************************************************************/

:root {
  --color-navsub: #1d1f2a;
  --color-h2opacity: #41465f;
  --color-boxshadow: rgba(29, 31, 42, 0.37);

  --c-menuactive: rgb(252, 220, 164);
  --c-menuhover: rgb(255, 234, 209);
  --c-menunormal: rgb(255, 250, 250);

  --c-fontlight: #e6e6e6;
  --c-fontdark: rgb(92, 87, 87);
  --c-fonthighlight: rgb(247, 187, 77);
  --c-highlight: rgb(149, 138, 0);

  --c-bg: rgba(252, 247, 238, 0.712);
  --c-buttondark: rgb(9, 86, 122);
  --c-buttonlight: rgb(96, 162, 193);

  --c-nav-bg-sub-drop: rgba(211, 191, 166, 0.849);

  --nav-terracotta: #ad4d20;
  --nav-goldgelb: #ccac00;
  --nav-petrol: #123742;
  --nav-bordeaux: #5f021f;
  --nav-gruen: #116c32;

  --c-main: #eae8e3;
  --c-fontgreen: #958a00;

  /* --gradientnav-dblau: rgb(35, 92, 92) linear-gradient(0deg, rgba(249,252,252,0) 0%, rgba(24,43,74,0.9136029411764706) 21%, rgba(9,38,84,1) 42%, rgba(6,20,42,1) 100%);
*/

  --gradientnav-dblau: #061328;
  --gradientfooter-dblau: rgba(6, 20, 42);

  --layout-position: center-stage;
  /*  body {
    grid-template-areas: 'left center-stage right';
  }
  
  main {
    grid-area: var(--layout-position);
  }
  */
}

/****************************************************************************
*****************************************************************************
* ''''''''''''''''''''''   basic elements   ************** ******************
****************************************************************************
*****************************************************************************/

body {
  font-family: "Amiri", serif;
  width: 100vw; /* Burgermenü das hereingezogen wird 
                          wird nicht mehr in der Mobileansicht dazugedrängt 
                                          (Ist nun unsichtbar) */
  overflow-x: hidden;

  background-image: url("./assets/img/bg-muster-cream.png");
  background-color: var(--c-bg);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-bottom: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6,
a {
  font-family: "flamenco", serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
}

h1 {
  font-size: 1.7rem;
}
h2 {
  font-size: 1.4rem;
  background-color: var(--color-boxshadow);
  color: var(--c-fontlight);
  padding: 0.2rem;
}
.wp-block-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

img,
.wp-block-image img {
  display: block;
  width: 100%;
  height: 80%;
  overflow: hidden;
}

a {
  color: var(--c-buttonlight);
}

/*        
.btn-grad {
background-image: linear-gradient(to right, #360033 0%, #0b8793  51%, #360033  100%);
margin: 10px;
padding: 15px 45px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background-size: 200% auto;
color: white;            
box-shadow: 0 0 20px #eee;
border-radius: 10px;
display: block;
}

.btn-grad:hover {
background-position: right center;  
color: #fff;
text-decoration: none;
} */

/****************************************************************************
*****************************************************************************
* ''''''''''''''''''''''   structure (layout grid)    ************** ******************
****************************************************************************
*****************************************************************************/

.wrapper {
  /* width: 100vw;
  height: 100vh; */

  display: grid;
  grid-template-columns: repeat(
    20,
    5%
  ); /* Spalten definieren zuerst Anzahl dann prozent*/
  grid-template-rows: auto auto 40px repeat(4, auto); /* Nav und header % 
                                          Reihen mit Auto da inhalt variable bleibt */
  /* grid-gap: 1rem 1rem; */
  overflow-x: hidden; /* links und rechts overflow  ein 
                                              scrollbalken in der Breite verschwindet*/
  position: relative;
}

/****************************************************************************
*****************************************************************************
* ''''''''''''''''''''''   header           ************** ******************
****************************************************************************
*****************************************************************************/

.header,
.header-dunkelblau,
.header-gruen,
.header-goldgelb,
.header-petrol,
.header-terracotta,
.header-bordeaux {
  grid-column-start: 1;
  grid-column-end: 21;
  grid-row-start: 3;
  grid-row-end: 4;
  /* background-color: var(--nav-gruen);  */
  position: relative;
  height: 0px;

  /*  display: grid;
 grid-template-columns: repeat(20, 5%);        Spalten definieren zuerst Anzahl dann prozent
  grid-template-rows: repeat(4, auto);           /* Reihen mit Auto da inhalt variable bleibt */
}

/*******************Template header **************************/
.header {
  background: rgb(249, 252, 252);
  background: linear-gradient(
    1deg,
    rgba(249, 252, 252, 1) 0%,
    rgba(48, 52, 73, 0.19931722689075626) 10%,
    rgba(46, 50, 70, 0.6222864145658263) 19%,
    rgba(46, 49, 70, 1) 36%,
    rgba(46, 50, 71, 1) 50%,
    rgba(46, 49, 68, 1) 66%,
    rgba(35, 38, 52, 1) 79%,
    rgba(39, 42, 56, 1) 89%,
    rgba(29, 31, 42, 1) 100%
  );
}

/*******************Template header gruen **************************/

.header-dunkelblau {
  background: rgb(249, 252, 252);
  background: linear-gradient(
    1deg,
    rgba(249, 252, 252, 0) 0%,
    rgba(183, 193, 206, 0.5130427170868348) 10%,
    rgba(146, 159, 179, 0.5942752100840336) 19%,
    rgba(55, 87, 136, 1) 36%,
    rgba(45, 76, 122, 1) 46%,
    rgba(14, 38, 75, 0.9304096638655462) 66%,
    rgba(9, 38, 84, 1) 76%,
    rgba(10, 30, 61, 1) 83%,
    rgba(6, 19, 40, 1) 100%
  );
}

/*******************Template header gruen **************************/

.header-gruen {
  background: rgb(249, 252, 252);
  background: linear-gradient(
    1deg,
    rgba(249, 252, 252, 1) 0%,
    rgba(120, 199, 148, 0.2049194677871149) 10%,
    rgba(78, 170, 111, 0.4654236694677871) 19%,
    rgba(56, 158, 94, 1) 36%,
    rgba(38, 139, 75, 1) 50%,
    rgba(22, 124, 59, 1) 66%,
    rgba(8, 113, 47, 1) 79%,
    rgba(17, 108, 50, 1) 83%,
    rgba(17, 108, 50, 1) 100%
  );
}
/*******************Template header bordeaux **************************/

.header-goldgelb {
  background: rgb(249, 252, 252);
  background: linear-gradient(
    1deg,
    rgba(249, 252, 252, 1) 0%,
    rgba(200, 169, 1, 0.19371498599439774) 10%,
    rgba(221, 186, 0, 0.5550595238095238) 19%,
    rgba(205, 173, 3, 1) 36%,
    rgba(201, 170, 1, 1) 50%,
    rgba(221, 186, 0, 1) 66%,
    rgba(193, 163, 0, 1) 79%,
    rgba(181, 153, 0, 1) 89%,
    rgba(204, 172, 0, 1) 100%
  );
}

/*******************Template header goldgelb **************************/

.header-petrol {
  background: rgb(249, 252, 252);
  background: linear-gradient(
    1deg,
    rgba(249, 252, 252, 1) 0%,
    rgba(44, 134, 159, 0.1825105042016807) 10%,
    rgba(40, 122, 146, 0.5690651260504201) 19%,
    rgba(37, 111, 132, 1) 36%,
    rgba(37, 111, 132, 1) 50%,
    rgba(29, 89, 106, 1) 66%,
    rgba(24, 76, 91, 1) 79%,
    rgba(18, 55, 66, 1) 89%,
    rgba(18, 55, 66, 1) 100%
  );
}

/*******************Template header petrol **************************/

.header-terracotta {
  background: rgb(249, 252, 252);
  background: linear-gradient(
    1deg,
    rgba(249, 252, 252, 1) 0%,
    rgba(226, 139, 98, 0.165703781512605) 10%,
    rgba(221, 118, 69, 0.4514180672268907) 19%,
    rgba(215, 96, 41, 1) 36%,
    rgba(202, 90, 37, 1) 50%,
    rgba(181, 72, 21, 1) 66%,
    rgba(170, 73, 28, 1) 79%,
    rgba(173, 77, 32, 1) 83%,
    rgba(173, 77, 32, 1) 100%
  );
}

/*******************Template header bordeaux **************************/

.header-bordeaux {
  background: rgb(249, 252, 252);
  background: linear-gradient(
    1deg,
    rgba(249, 252, 252, 1) 0%,
    rgba(118, 2, 19, 0.24693627450980393) 10%,
    rgba(118, 2, 19, 0.577468487394958) 19%,
    rgba(124, 4, 21, 1) 36%,
    rgba(108, 3, 19, 1) 50%,
    rgba(110, 3, 19, 1) 66%,
    rgba(78, 2, 13, 1) 79%,
    rgba(76, 16, 6, 1) 83%,
    rgba(76, 16, 6, 1) 100%
  );
}
.header-img {
  display: none;
}

.header-brand {
  width: 10%;
  height: 74px;
  z-index: 1000;
}

.header-brand-title {
  position: fixed;
  top: 2.6rem;
  left: 4rem;
  text-transform: none;
  z-index: 999;
}

.header-brand-logo {
  width: 31%;
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
}

.header-brand h1 {
  font-size: 0.5rem;
  z-index: 998;
}

.header-brand h1 a {
  /*   titel customizer */
  text-decoration: none;
  /*  color: var(--color-navsub); */
  text-shadow: 2px 2px 3px var(--c-fontlight);
  width: 50%;
  height: 50%;
}

.custom-logo {
  /*  Wordpress eigene Klasse */
  z-index: inherit;
}

/****************************************************************************
*****************************************************************************
* ''''''''''''''''''''''   navigation mobil          ************** ******************
****************************************************************************
*****************************************************************************/

#nav-main,
#nav-gruen,
#nav-bordeaux,
#nav-terracotta,
#nav-dblau,
#nav-petrol,
#nav-goldgelb {
  grid-column-start: 1;
  grid-column-end: 21;
  grid-row-start: 2;
  grid-row-end: 3;
  height: 39px;
  padding: 0;
  text-align: center; /* Menü mittig angeordnet (Ausklappen css beachten für Desktop)*/
  z-index: 997;
  position: relative; /*  Für folgendes Bürgermenü wichtig */
  /*  list-style: none;            Style der ersten leiste - vor menüleiste
 display: flex;
 flex-direction: row;
 justify-content: space-evenly; */
}

/*******************Template nav dunkelblau **************************/

#nav-dblau {
  background-color: var(--gradientnav-dblau);
}

/*******************Template nav gruen **************************/

#nav-gruen {
  background-color: var(--nav-gruen);
}

/*******************Template nav gruen **************************/

#nav-terracotta {
  background-color: var(--nav-terracotta);
}
/*******************Template nav bordeaux **************************/

#nav-bordeaux {
  background-color: var(--nav-bordeaux);
}

/*******************Template nav goldgelb **************************/

#nav-goldgelb {
  background-color: var(--nav-goldgelb);
}

/*******************Template nav petrol **************************/

#nav-petrol {
  background-color: var(--nav-petrol);
}
/*********************************************************/

#nav-main-desktop {
  display: none; /*  In mobiler Ansicht wird destop nicht angezeigt */
  z-index: 996;
}

/********************* Hamburgermenü *****************/

.nav-main-mobile {
  position: fixed;
  top: 39px;
  right: 0.5rem;
  width: 51px;
  height: 39px;
  background-color: var(--color-navsub);
  z-index: 995;
}

#nav-main-mobile-toggle {
  /*  AuslöserCheckbox mit Hamburgerstriche */
  position: relative;
  top: 11px;

  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none; /* Checkbox optisch ausgeschalten für den User */
  z-index: 994;
}

#nav-main-mobile-toggle input {
  /*  Für alle Elemente die sich im Input befinden */
  position: absolute;
  z-index: 993;
  width: 40px;
  height: 32px;
  cursor: pointer;
  opacity: 0; /* Checkbox Transparenz */
}

#nav-main-mobile-toggle span {
  /* Hamburger span Striche */
  z-index: 992;
  display: flex;
  background-color: var(--c-fonthighlight);
  width: 40px;
  height: 2px;
  margin-bottom: 5px;

  /* Für die Animation */
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
    background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
  transform-origin: 5px 0;
}

/* Animation des Hamburger Menüs */
#nav-main-mobile-toggle span:first-child {
  transform-origin: 0 0;
}

#nav-main-mobile-toggle span:nth-last-child(2) {
  transform-origin: 0 100%;
}

#nav-main-mobile-toggle input:checked ~ span {
  transform: rotate(45deg) translate(-3px, -1px);
  opacity: 1;
  background: var(--c-menuactive);
}

#nav-main-mobile-toggle input:checked ~ span:nth-last-child(3) {
  transform: rotate(0deg) scale(0.2, 0.2);
  opacity: 0;
}

#nav-main-mobile-toggle input:checked ~ span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}

#nav-main-mobile-menu {
  /* Menü wird in den Bildschirm reingefahren */
  position: absolute;
  width: 400px;
  height: 100vh;
  margin: -9px 0 0-163px;
  padding: 75px 30px 50px 50px;
  padding-left: 30px;
  z-index: 991;
  background-color: var(--color-navsub);

  /* Animation für die Menü-card*/

  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  transform: translate(100%, 0);
  transform-origin: 0 0;
}

#nav-main-mobile-menu li {
  /* Einzelne Listpunkte */
  padding: 5px;
  list-style: none;
}

#nav-main-mobile-menu li a {
  /* ohne Unterstrich  */
  text-decoration: none;
  color: var(--c-fontlight);
}
.menu-hauptnavigation-container {
  margin: 0 auto;
  width: 50%;
}
ul#menu-hauptnavigation {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

#nav-main-mobile-toggle input:checked ~ ul {
  transform: none;
}

/******************Submenü header**********************/

#nav-main-sub-menu-box {
  grid-column-start: 1;
  grid-column-end: 21;
  grid-row-start: 1;
  grid-row-end: 2;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 990;
  width: 100vw;
  height: 39px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: var(--color-navsub);
  padding-top: 0.3rem;
}

.nav-main-sub-menu {
  /*  Einzelne Elemente*/
  list-style: none;
  text-decoration: none;
  padding: 0.1rem;
  /*  border-bottom: solid 2px var(--c-fontlight);*/
  margin: 0.3rem 1rem 0rem 0;
  color: var(--c-fontlight);
}

#nav-main-sub-menu ul li a {
  float: left;
  font-size: 1.3rem;
  color: var(--c-fontlight);
  min-width: 9rem;
  padding: 0.8rem;
  text-decoration: none;
  text-align: center;
}

.menu-submenue-header-container:hover {
  color: var(--c-fontdark);
  background-color: var(--c-fonthighlight);
}

#menu-submenue-header {
  list-style: none;
  color: var(--c-fontlight);
  border: solid 1px var(--c-fontlight);
  font-size: 0.7rem;
  text-decoration: none;
  padding: 0.3rem 0.3rem;
}

#menu-submenue-header :hover {
  color: var(--c-fontdark);
  background-color: var(--c-fonthighlight);
}

#menu-submenue-header li a {
  color: var(--c-fontlight);
  text-decoration: none;
}

.nav-main-sub-menu :hover {
  /*  Einzelne Elemente */

  border-bottom: solid 1px var(--c-menuactive);
  /*  background-color: var(--c-menuactive); */
}

/******************footer nav widget**********************/

.menu-footer-navigation-container ul li a {
  font-size: 1rem;
  color: var(--c-fontlight);
  min-width: 9rem;
  text-decoration: none;
  text-align: center;
  background-color: var(--color-navsub);
}

.menu-footer-navigation ul li {
  list-style: none;
}
.footer-gruen {
  position: relative;
}

.footer-widget-center,
.footer-widget-right {
  height: 16rem;
  margin-bottom: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.footer-widget-center {
  width: 100%;
}
.footer-klecks {
  overflow: visible;
  width: 83%;
  position: absolute;
  top: 0rem;
  left: -25%;
  height: 111%;
}

.c-footer__contact {
  transform: translate(57px, -20px);
  padding-left: 15px;
}

.footer-widget-right {
  width: 40%;
  display: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.abstand-widget {
  font-size: 0.8rem;
  justify-content: flex-end;
}

.o-grid {
  justify-content: flex-start;
}

.o-content__body h4 {
  color: whitesmoke;
}

.first-word-light {
  color: whitesmoke;
}

.second-word-dark {
  color: #1d1f2a;
}

/******************Submenü Footer**********************/

.nav-footer-submenu-box {
  grid-column-start: 1; /* ganze breite von links nach rechts */
  grid-column-end: 21;
  grid-row-start: 7;
  grid-row-end: 8;
  z-index: 400;
}

.my_nav_subfooter_class {
  /*  ganzer Breite */
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  background-color: var(--color-navsub);
  z-index: 300;
}

.my_nav_subfooter_class ul li {
  /*  einzelne Listelemente */
  /* background-color: var(--color-01); */
  list-style: none;
  float: left;
  margin: 0.3rem 0.5rem 0.5rem 0.5rem;
  padding: 0.2rem;
  color: var(--c-fonthighlight);
}

.my_nav_subfooter_class ul li a {
  color: var(--c-fontlight);
  min-width: 9rem;
  text-decoration: none;
  text-align: center;
}
/* 
#menu-submenue-footer{

} */

/****************************************************************************
*****************************************************************************
* ''''''''''''''''''''''   content           ************** ******************
****************************************************************************
*****************************************************************************/

.index-main {
  grid-column-start: 1; /* ganze breite von links nach rechts */
  grid-column-end: 21;
  grid-row-start: 4;
  grid-row-end: 5;
  background-color: var(--c-bg);
  min-height: 1024px;
  padding: 1% 1% 1% 2%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* Reihenumbruch */
}

/* ''''''''''''''''''''''   index          ************** ****************** */

.index-article-box {
  width: 100%;
  height: 35rem;
  box-shadow: 0.25rem 0.25rem 0.5rem var(--c-nav-bg-sub-drop);
  margin: 0.5 0.5rem 0.5rem 0;
  margin: 0.5rem;
}
.index-article {
  height: 29.5rem;
  padding: 0.3rem;
  margin-bottom: 1rem;
}

.index-article img {
  /* Beitragsbild abstand unten */
  height: 68%;
  margin-bottom: 1rem;
}

.index-article-footer {
  border: solid 1px var(--color-navsub);
  height: 1.7rem;
  padding: 0.7rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.9rem;
}
/* 
.index-article-subnav{
display: block;
} */

/* ''''''''''''''''''''''   page          ************** ****************** */
.page-main,
.page-main-fullwidth,
.single-main,
.single-main-center,
.single-portfolio,
.page-main-gallery,
.page-dunkelblau-gallery-page,
.single-portfolio-wrapper,
.page-main-dunkelblau,
.page-main-bordeaux,
.page-main-petrol,
.page-main-goldgelb,
.page-main-gruen {
  grid-column-start: 1; /* ganze breite von links nach rechts */
  grid-column-end: 21;
  grid-row-start: 4; /*  von oben nach unten */
  grid-row-end: 5;
  background-color: var(--c-bg);
}
.page-main-bordeaux {
  margin-top: -52px;
}
.page-main-gruen {
  margin-top: -39px;
  padding-top: 0px;
}

.single-main {
  display: flex;
  flex-direction: column;
}

.single-article-subnav {
  /* vor zurück button beiträge */
  padding: 1rem 0 1rem 0;
  display: flex;
  justify-content: space-between;
  color: var(--c-nav-bg-sub-drop); /* Für die Farbe der Pfeile */
}

.single-article-subnav a {
  /* Linkfarbe ändern der angezeigten Blogtitel */
  color: var(--c-nav-bg-sub-drop);
}

/* ''''''''''''''''''''''   Single          ************** ****************** */

.post-categories {
  /* Von Worpress vergebene Klasse */
  list-style: none;
}
.post-categories li {
  float: left;
}
.post-categories li::after {
  /*  pseudoklasse damit ein Leerzeichen zw. den kategorien entsteht*/
  content: ", ";
  margin-right: 0.5rem;
}

/****************************************************************************
*****************************************************************************
* ''''''''''''''''''''''   sidebar           ************** ******************
****************************************************************************
*****************************************************************************/

.aside,                /* Sidebar grid für light und Dark */
.aside-dark {
  display: none;
  grid-column-start: 1;
  grid-column-end: 21;
  grid-row-start: 5;
  grid-row-end: 6;
  padding: 2rem;
  margin-top: 40px;
  padding-right: 34px;
  margin-left: 40px;
}

.aside-dark {
  /* Darkmode Sidebar */
  background-color: var(--color-navsub);
  color: var(--c-fontlight);
}

.widget-area {
  box-shadow: 0px 0px 17px 5px var(--color-boxshadow); /* Schatten wie bei article */
  border: var(--c-nav-bg-sub-drop) 1px solid;
  padding: 1rem;
  width: 17rem;
  background-color: var(--c-bg);
  margin-top: 55px;
}

.portfolio-zitat widget {
  height: 30%;
}

.portfolio-zitat figure {
  width: 30%;
  height: 30%;
}

.widget {
  max-height: 18rem;
  overflow: visible;
  margin-top: 1rem;
  width: 100%;
  margin-bottom: 1rem;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 111;
}

/*  
 background-color: var(--c-menuhover);
border: 1px solid var(--c-buttonlight);
backdrop-filter: blur(10px); */
.widget h2 {
  background-color: var(--color-navsub);
  color: var(--c-fontlight);
  padding: 0.5rem;
  width: 100%;
  font-size: 1.3rem;
  text-align: center;
}

.widget li {
  list-style: none;
}

.widget-title {
  background-color: var(--c-buttondark);
  padding: 0.1rem;
} /* 
.widget figure {
  height: 14rem;
} */

/****************************************************************************
*****************************************************************************
* ''''''''''''''''''''''   footer           ************** ******************
****************************************************************************
*****************************************************************************/

.footer,
.footer-dunkelblau,
.footer-gruen,
.footer-terracotta,
.footer-goldgelb,
.footer-petrol,
.footer-bordeaux {
  grid-column-start: 1;
  grid-column-end: 21;
  grid-row-start: 6;
  grid-row-end: 7;
  background-color: var(--color-navsub);
  position: relative;
  color: var(--c-fontlight);
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

/**************************** Template Footer dunkelblau **************/
.page-dunkelblau-loop-post,
.page-dunkelblau-loop-page {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1rem 1rem;
  align-items: center;
  flex-direction: row;
  width: 100%;
}
.page-dunkelblau-profil,
.page-dunkelblau-portfolio,
.page-dunkelblau-service {
  width: 100%;
}

.footer {
  background: rgb(249, 252, 252);
  background: linear-gradient(
    179deg,
    rgba(249, 252, 252, 1) 0%,
    rgba(48, 52, 73, 0.19931722689075626) 10%,
    rgba(46, 50, 70, 0.6222864145658263) 19%,
    rgba(46, 49, 70, 1) 36%,
    rgba(46, 50, 71, 1) 50%,
    rgba(46, 49, 68, 1) 66%,
    rgba(35, 38, 52, 1) 79%,
    rgba(39, 42, 56, 1) 89%,
    rgba(29, 31, 42, 1) 100%
  );
}

.footer-dunkelblau {
  background: rgb(249, 252, 252);
  background: linear-gradient(
    179deg,
    rgba(249, 252, 252, 0) 0%,
    rgba(183, 193, 206, 0.5130427170868348) 10%,
    rgba(146, 159, 179, 0.5942752100840336) 19%,
    rgba(55, 87, 136, 1) 36%,
    rgba(45, 76, 122, 1) 46%,
    rgba(14, 38, 75, 0.9304096638655462) 66%,
    rgba(9, 38, 84, 1) 76%,
    rgba(10, 30, 61, 1) 83%,
    rgba(6, 19, 40, 1) 100%
  );
}

/**************************** Template Footer gruen **************/
.footer-gruen {
  background: rgb(249, 252, 252);
  background: linear-gradient(
    179deg,
    rgba(249, 252, 252, 1) 0%,
    rgba(120, 199, 148, 0.2049194677871149) 10%,
    rgba(78, 170, 111, 0.4654236694677871) 19%,
    rgba(56, 158, 94, 1) 36%,
    rgba(38, 139, 75, 1) 50%,
    rgba(22, 124, 59, 1) 66%,
    rgba(8, 113, 47, 1) 79%,
    rgba(17, 108, 50, 1) 83%,
    rgba(17, 108, 50, 1) 100%
  );
}

/**************************** Template Footer terracotta **************/
.footer-terracotta {
  background: rgb(249, 252, 252);
  background: linear-gradient(
    179deg,
    rgba(249, 252, 252, 1) 0%,
    rgba(226, 139, 98, 0.165703781512605) 10%,
    rgba(221, 118, 69, 0.4514180672268907) 19%,
    rgba(215, 96, 41, 1) 36%,
    rgba(202, 90, 37, 1) 50%,
    rgba(181, 72, 21, 1) 66%,
    rgba(170, 73, 28, 1) 79%,
    rgba(173, 77, 32, 1) 83%,
    rgba(173, 77, 32, 1) 100%
  );
}

/**************************** Template Footer bordeaux **************/
.footer-bordeaux {
  background: rgb(249, 252, 252);
  background: linear-gradient(
    179deg,
    rgba(249, 252, 252, 1) 0%,
    rgba(118, 2, 19, 0.24693627450980393) 10%,
    rgba(118, 2, 19, 0.577468487394958) 19%,
    rgba(124, 4, 21, 1) 36%,
    rgba(108, 3, 19, 1) 50%,
    rgba(110, 3, 19, 1) 66%,
    rgba(78, 2, 13, 1) 79%,
    rgba(76, 16, 6, 1) 83%,
    rgba(76, 16, 6, 1) 100%
  );
}

/**************************** Template Footer goldgelb **************/
.footer-goldgelb {
  background: rgb(249, 252, 252);
  background: linear-gradient(
    179deg,
    rgba(249, 252, 252, 1) 0%,
    rgba(200, 169, 1, 0.19371498599439774) 10%,
    rgba(221, 186, 0, 0.5550595238095238) 19%,
    rgba(205, 173, 3, 1) 36%,
    rgba(201, 170, 1, 1) 50%,
    rgba(221, 186, 0, 1) 66%,
    rgba(193, 163, 0, 1) 79%,
    rgba(181, 153, 0, 1) 89%,
    rgba(204, 172, 0, 1) 100%
  );
}

/**************************** Template Footer petrol **************/
.footer-petrol {
  background: rgb(249, 252, 252);
  background: linear-gradient(
    179deg,
    rgba(249, 252, 252, 1) 0%,
    rgba(44, 134, 159, 0.1825105042016807) 10%,
    rgba(40, 122, 146, 0.5690651260504201) 19%,
    rgba(37, 111, 132, 1) 36%,
    rgba(37, 111, 132, 1) 50%,
    rgba(29, 89, 106, 1) 66%,
    rgba(24, 76, 91, 1) 79%,
    rgba(18, 55, 66, 1) 89%,
    rgba(18, 55, 66, 1) 100%
  );
}

/****************************************************************************
*****************************************************************************
* ''''''''''''''''''''''   templates           ************** ******************
****************************************************************************
*****************************************************************************/
.page-home-news,
.page-dunkelblau-portfolio,
.page-main-gallery,
.page-dunkelblau-gallery-page,
.page-main-dunkelblau,
.page-main-bordeaux,
.page-main-goldgelb,
.page-main-petrol,
.page-main-gruen {
  overflow: hidden;
  margin-top: -4rem;
}

.kontaktbox {
  display: flex;
  width: 50%;
}

.page-main-gruen-profil {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.page-portfolio-flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.page-dunkelblau-gallery-page {
  width: 100%;
}
.page-dunkelblau-gallery-page img {
  width: 100%;
}

.page-dunkelblau-gallery-page-img a {
  width: 100%;
}
.page-dunkelblau-profil,
.page-dunkelblau-portfolio,
.page-dunkelblau-service {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.page-main-gallery-img,
.page-main-dunkelblau-img,
.page-main-bordeaux-img,
.page-main-petrol-img,
.page-main-goldgelb-img,
.page-main-gruen-img {
  width: 80%;
  margin: 0 1rem 1rem 1rem;
  overflow: hidden;
}
.page-portfolio-gallery-img {
  width: 100%;
  margin: 0 1rem 1rem 1rem;
  overflow: hidden;
  height: max-content;
}

.page-portfolio-gallery-img p {
  padding-top: 1.5rem;
}

.page-dunkelblau-gallery-page-img {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  /*  margin: 0 1rem 1rem 1rem; */
  overflow: hidden;
  margin: 0.1rem;
}
.page-dunkelblau-gallery-page-img h2 {
  background-color: var(--color-h2opacity);
  width: 100%;
  color: var(--c-fontlight);
  text-align: center;
  padding: 0.3rem;
}

.page-dunkelblau-gallery-page-img a {
  justify-content: center;
  align-items: center;
  width: 100%;
}

.page-portfolio-gallery-img h2 {
  font-size: 1.4rem;
  text-align: center;
}
.page-portfolio-gallery-img img {
  height: 50%;
}

.page-main-gallery-img img:hover,
.page-dunkelblau-gallery-page-img img:hover,
.page-portfolio-gallery-img img:hover,
.page-main-dunkelblau-img img:hover,
.page-main-bordeaux-img img:hover,
.page-main-petrol-img img:hover,
.page-dunkelblau-profil-img img:hover,
.page-main-dunkelblau-service-img img:hover,
.page-main-dunkelblau-portfolio-img img:hover,
.page-main-goldgelb-img img:hover,
.page-main-gruen-img img:hover {
  transform: scale(0.9);
  filter: contrast(2);
  transition: all 0.8s ease-in-out;
  border-radius: 10%;
  box-shadow: 1px -1px 20px 9px var(--color-boxshadow);
}

.page-home-news-post,
.page-dunkelblau-portfolio-post {
  width: 100%;
  margin: 0 0.5rem 0.5rem 0;
}

.page-home-news-post h2,
.page-dunkelblau-portfolio-post h2 {
  padding-top: 1.2rem;
  text-align: center;
}

.page-main-dark {
  background-color: var(--color-navsub);
  color: var(--c-fontlight);
  grid-column-start: 1; /* ganze breite von links nach rechts */
  grid-column-end: 21;
  grid-row-start: 3; /*  von oben nach unten */
  grid-row-end: 4;
  padding: 1rem;
}

.attachment-profil-img {
  height: 100%;
  padding: 0.2rem;

  float: left;
}

.single-main-center,
.single-portfolio {
  /*  Beitragsseite container flex */
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.single-main-center-wrapper
/* .single-portfolio-center-wrapper */ {
  width: 60%;
  display: flex;
  flex-direction: column;
}

.single-article-center {
  width: 85%;
  padding: 10px;
  margin: 0 auto;
}
.single-article-center h2 {
  width: 70vw;
  margin: 0 auto;
  margin-top: 0.8rem;
}

.single-article-subnav-center {
  width: 100%;
}
.page-dunkelblau-loop-post,
.page-dunkelblau-loop-page {
  margin-top: 3rem;
}

.single-portfolio-center-wrapper {
  margin: 10px auto;
}

/* align-items: center; */
/* 
.single-article-center{
width: 60%;
}
*/
/*  Seite Volle Breite */
.kontaktbox {
  height: 30rem;
  width: 100vw;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
}

.page-main-gruen-profil-img {
  width: 70%;
}

.page-main-gruen-profil-img img {
  width: 12rem;
}
.contact-form-left {
  position: absolute;
  top: 193px;
  left: 28px;
  transform: rotate(-9deg);
  box-shadow: 5px 5px 14px 5px rgba(29, 31, 42, 0.69);
}
.contact-form-left {
  width: 73%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 0.5rem;
  background-color: var(--c-main);
}

/****************************************************************************
*****************************************************************************
* ''''''''''''''''''''''   comments  ********************
****************************************************************************
*****************************************************************************/

.single-comment-style img {
  width: 6rem;
  height: 6rem;
}

.single-formular-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.comment-respond {
  padding: 1rem;
  border: solid 3px var(--color-boxshadow);
}
.comment-respond h3 {
  background-color: var(--color-h2opacity);
  padding: 1rem;
  color: var(--c-fontlight);
}
#comment {
  border: solid 2px var(--color-h2opacity);
  width: auto;
}
input[type="text"] {
  border: solid 2px var(--color-h2opacity);
  background-color: var(--c-fontlight);
  margin: 0.3rem;
}
input[type="submit"] {
  background-color: var(--color-h2opacity);
  color: var(--c-fontlight);
  padding: 0.5rem;
  border-radius: 20px;
}

/****************************************************************************
*****************************************************************************
* ''''''''''''''''''''''   special content (plugins)   ********************
****************************************************************************
*****************************************************************************/

/* Gutenberg-Block Tabelle */
.wp-block-table {
  font-size: 1.2rem;
}

.wp-block-table table {
  border: solid 1px var(--c-menuactive);
}

.wp-block-table table thead th {
  text-align: left;
  padding: 0.5rem 0 0.5rem 0.2rem;
  background-color: var(--c-menuactive);
}

.wp-block-table table td {
  padding: 0.5rem 0 0.5rem 0.2rem;
}

.has-fixed-layout {
  border: solid 1px var(--c-menuactive);
}

.has-fixed-layout thead th {
  text-align: left;
  padding: 0.5rem 0 0.5rem 0.2rem;
  background-color: var(--c-menuactive);
}

.has-fixed-layout td {
  padding: 0.5rem 0 0.5rem 0.2rem;
}

/****************************************************************************
************************* FontAwesome ************************
* ''''''''''''''''''''''**************************   ********************/

.index-article-footer-author::before {
  font-family: "FontAwesome"; /* User Icon wurde NUR in Css eingebunden */
  font-size: 0.9rem;
  margin-right: 0.3rem;
  content: "\f007";
}
/*                                          Beides Einbinden ist gut 
.fas, .fa-solid {            Icon ansprechen das in index.php drin ist 
color: var(--color-02);
} */

.fa .fa-brands {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.index-article-footer-date::before {
  font-family: "FontAwesome";
  font-size: 0.9rem;
  margin-right: 0.3rem;
  content: "\f133";
}

.single-article-category li::before {
  font-family: "FontAwesome";
  font-size: 0.9rem;
  margin-right: 0.3rem;
  content: "\f07b";
  color: var(--c-nav-bg-sub-drop);
}

.contact-form-left h4::before {
  font-family: "FontAwesome";
  font-size: 0.9rem;
  margin-right: 0.3rem;
  content: "\f007";
  color: var(--c-fontgreen);
  padding-right: 10px;
}

.map::before {
  font-family: "FontAwesome";
  font-size: 0.9rem;
  margin-right: 0.3rem;
  content: "\f276";
  color: var(--c-fontgreen);
  padding-right: 10px;
}

.phone::before {
  font-family: "FontAwesome";
  font-size: 0.9rem;
  margin-right: 0.3rem;
  content: "\f095";
  color: var(--c-fontgreen);
  padding-right: 10px;
}

.linkedin::before {
  font-family: "FontAwesome";
  font-size: 0.9rem;
  margin-right: 0.3rem;
  content: "\f0e1";
  color: var(--c-fontgreen);

  padding-right: 10px;
}

.fa-linkedin {
  font-family: "FontAwesome";
  font-size: 2.5rem;
  padding: 0.5rem;
  color: #0e76a8;
}
.mail {
  display: flex;
}
.mail::before {
  font-family: "FontAwesome";
  font-size: 0.9rem;
  margin-right: 0.3rem;
  content: "\f0e0";
  color: var(--c-fontgreen);
  padding-right: 10px;
}

hr {
  background: var(--c-highlight);
  width: 50%;
  margin: 0px auto 20px auto;
}

.kontaktme {
  margin: 3rem 0;
}

.kontaktme h1 {
  font-size: 1.5rem;
  color: var(--c-fontgreen);
  text-align: center;
  line-height: normal;
  text-transform: none;
}

.kontaktme h4 {
  text-align: center;
  text-transform: none;
}
.contact-form {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-form-left {
  width: 85%;
}
.contact-form-left h4 {
  letter-spacing: -1px;
  font-size: 18px;
}

.contact-form-right {
  width: 70%;
}
.single-formular-box {
  width: 100%;
  height: 100%;
}
.grid-footer {
  width: max-content;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  font-size: 0.8rem;
  line-height: 1;

  background: #41465f70;
  padding: 1rem;
  border-radius: 9px;
}

.grid-30 {
  width: 100%;
}
.contact-content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}
.contact {
  color: var(--c-main);
  border-bottom: 1px solid var(--c-fontlight);
  text-align: center;
  font-weight: bold;
  font-size: 1rem;
}
.contact-font {
  color: var(--c-fontlight);
}
.footerbild1 {
  transform: rotate(19deg) translate(-8px, 7px);
  box-shadow: 5px 5px 14px 5px rgb(29 31 42 / 69%);
  width: 78%;
}
.footer-widget-right {
  display: none;
}
.videobox {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  border-radius: 10%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}

/****************************************************************************
*****************************************************************************
* ''''''''''''''''''''''    @media Big Phone         ************** ******************
****************************************************************************
*****************************************************************************/

@media screen and (min-width: 442px) {
  #nav-main,
  #nav-gruen,
  #nav-bordeaux,
  #nav-terracotta,
  #nav-dblau,
  #nav-petrol,
  #nav-goldgelb {
    height: 39px;
    right: 0px;
    position: fixed;
    top: 39px;
    left: 0;
  }

  /*******************Template nav dunkelblau **************************/

  #nav-dblau {
    background-color: var(--gradientnav-dblau);
  }

  /*******************Template nav gruen **************************/

  #nav-gruen {
    background-color: var(--nav-gruen);
  }

  /*******************Template nav gruen **************************/

  #nav-terracotta {
    background-color: var(--nav-terracotta);
  }
  /*******************Template nav bordeaux **************************/

  #nav-bordeaux {
    background-color: var(--nav-bordeaux);
  }

  /*******************Template nav goldgelb **************************/

  #nav-goldgelb {
    background-color: var(--nav-goldgelb);
  }

  /*******************Template nav petrol **************************/

  #nav-petrol {
    background-color: var(--nav-petrol);
  }

  .header-brand {
    /* position: fixed;
  top: 0px;
  left: 1rem; */
    padding: 0.5rem;
  }

  .header-brand-title {
    top: 3rem;
    left: 6rem;
  }
  .page-home-news,
  .page-dunkelblau-portfolio,
  .page-main-gallery,
  .page-dunkelblau-gallery-page,
  .page-main-dunkelblau,
  .page-main-bordeaux,
  .page-main-goldgelb,
  .page-main-petrol,
  .page-main-gruen {
    overflow: hidden;
    margin-top: -1.5rem;
  }
  .kontaktbox {
    height: 30rem;
    width: 85vw;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
  }

  .page-main-gruen-profil-img {
    width: 70%;
  }

  .contact-form-left {
    position: absolute;
    top: 193px;
    left: 107px;
    transform: rotate(-9deg);
    box-shadow: 5px 5px 14px 5px rgba(29, 31, 42, 0.69);
    width: 65%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 0.5rem;
    background-color: var(--c-main);
  }

  .footer-klecks {
    left: -2%;
  }

  .footerbild1 {
    transform: rotate(19deg) translate(-8px, 7px);
    box-shadow: 5px 5px 14px 5px rgb(29 31 42 / 69%);
    width: 60%;
  }
}

/****************************************************************************
*****************************************************************************
* ''''''''''''''''''''''    @media Big Phone         ************** ******************
****************************************************************************
*****************************************************************************/

@media screen and (min-width: 580px) {
  #nav-main-mobile-menu {
    /* HamburgerMenü wird in den Bildschirm reingefahren */
    width: 180vw;
  }

  #nav-main,
  #nav-gruen,
  #nav-bordeaux,
  #nav-terracotta,
  #nav-dblau,
  #nav-petrol,
  #nav-goldgelb {
    height: 41px;
  }

  .header-brand-title {
    top: 4rem;
    left: 9rem;
  }

  .abstand-widget {
    font-size: 0.8rem;
    justify-content: flex-end;
  }
  .grid-footer {
    width: max-content;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    font-size: 0.9rem;
    line-height: normal;
    margin-right: 2rem;
    background: #41465f70;
    padding: 1rem;
    border-radius: 9px;
  }

  .grid-30 {
    width: 100%;
  }
  .contact-content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
  }
  .contact {
    color: var(--c-main);
    border-bottom: 1px solid var(--c-fontlight);
    text-align: center;
    font-weight: bold;
  }
  .contact-font {
    color: var(--c-fontlight);
  }

  .footerbild1 {
    transform: rotate(19deg) translate(15px, 7px);
    box-shadow: 5px 5px 14px 5px rgb(29 31 42 / 69%);
    width: 50%;
  }

  .c-footer__contact {
    padding-left: 15px;
  }
}

/****************************************************************************
*****************************************************************************
* ''''''''''''''''''''''    @media tablet           ************** ******************
****************************************************************************
*****************************************************************************/
@media screen and (min-width: 800px) {
  h1 {
    font-size: 2.2rem;
  }
  h2 {
    font-size: 1.2rem;
    text-align: center;
    /* background-color: var(--color-h2opacity); */
    color: var(--c-fontlight);
    padding: 1rem;
    width: 100%;
  }

  #nav-main-mobile-menu {
    /* HamburgerMenü wird in den Bildschirm reingefahren */

    width: 200vw;
  }
  .index-main {
    grid-column-start: 1;
    grid-column-end: 15;
    grid-row-start: 4;
    grid-row-end: 6;
    box-shadow: 0px 0px 17px 5px var(--color-boxshadow);
  }

  .page-dunkelblau-loop-post,
  .page-dunkelblau-loop-page {
    width: 100%;
    margin-top: 3rem;
  }

  .page-dunkelblau-loop-page {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 100%;
  }

  .page-dunkelblau-profil,
  .page-dunkelblau-portfolio,
  .page-dunkelblau-service {
    width: 48%;
  }

  .index-article-box,
  .page-home-news-post,
  .page-dunkelblau-portfolio-post,
  .page-main-gallery-img,
  .page-dunkelblau-gallery-page-img,
  .page-main-dunkelblau-img,
  .page-main-petrol-img,
  .page-main-goldgelb-img,
  .page-dunkelblau-profil-img,
  .page-dunkelblau-portfolio-img,
  .page-dunkelblau-service-img,
  .page-main-gruen-img,
  .page-dunkelblau-profil-img,
  .page-dunkelblau-portfolio-img,
  .page-dunkelblau-service-img {
    width: 44%;
  }

  .content-70 {
    width: 70%;
  }

  .page-portfolio-gallery-img {
    width: 38%;
    margin: 0 1rem 1rem 1rem;
    overflow: hidden;
    height: max-content;
  }

  .page-portfolio-gallery-img h2 {
    font-size: 1.3rem;
    text-align: center;
  }
  .page-portfolio-gallery-img img {
    height: 35%;
  }
  .page-portfolio-gallery-img p {
    margin: 15px;
  }
  .attachment-post-thumbnail {
    width: 70%;
    height: 70%;
    margin: 0 auto;
    padding: 1rem;
  }

  .page-main,
  .page-main-dark,
  .single-portfolio,
  .single-main {
    grid-column-start: 1;
    grid-column-end: 21;
    grid-row-start: 4;
    grid-row-end: 6;
  }

  .portfolio-zitat widget {
    height: 100%;
  }

  .portfolio-zitat figure {
    width: 100%;
    height: 100%;
  }

  .page-main-gruen-box {
    width: 80%;
    margin: 0 auto;
  }

  .header-brand-logo {
    width: 20%;
    position: fixed;
    top: 8px;
    left: 8px;
  }
  .header-brand-title {
    top: 3.3rem;
    left: 7rem;
  }
  .c-footer__contact {
    margin-left: -1.6rem;
  }

  .footer-klecks {
    overflow: visible;
    width: 100%;
    position: absolute;
    top: 0rem;
    left: -6rem;

    height: 121%;
  }

  .footer-img {
    margin-top: 17px;
    width: 12rem;
  }
  .footer-widget-right {
    width: 40%;
    display: block;
    display: flex;
    justify-content: flex-end;
  }

  .footerbild1 {
    transform: rotate(19deg) translate(15px, 7px);
    box-shadow: 5px 5px 14px 5px rgb(29 31 42 / 69%);
    width: 40%;
  }
  .footerbild2 {
    transform: rotate(-17deg) translate(-34px, 0px);
    box-shadow: 5px 5px 14px 5px rgba(29, 31, 42, 0.69);
    width: 20%;
  }

  .footerbild3 {
    transform: rotate(7deg) translate(0px, 12px);
    box-shadow: 5px 5px 14px 5px rgba(29, 31, 42, 0.69);
    width: 100%;
  }

  .kontaktbox {
    height: 30rem;
    width: 85vw;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    position: relative;
    padding: 1rem;
  }

  .page-main-gruen-profil-img {
    width: 80%;
  }

  .contact-form-left {
    position: absolute;
    top: 193px;
    left: 107px;
    transform: rotate(-9deg);
    box-shadow: 5px 5px 14px 5px rgba(29, 31, 42, 0.69);
    width: 40%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 0.5rem;
    background-color: var(--c-main);
  }

  .textbox {
    display: flex;
    justify-content: center;
    margin: 6rem 0;
  }

  .page-main-gruen-profil-img {
    width: 400px;
    height: 400px;
  }

  .wp-block-video.biene {
    width: 40%;
  }
  .wp-block-video.fliegende-biene {
    width: 40%;
  }
  .videobox h3 {
    text-align: center;
    padding-top: 10px;
  }

  .wp-block-video.baum {
    width: 40%;
  }
  .wp-block-video.navigation {
    width: 40%;
  }

  .wp-block-video.appdesign {
    width: 60%;
  }

  .c-footer__contact {
    transform: translate(px, -4px);
    padding-left: 15px;
  }
}

/****************************************************************************
*****************************************************************************
* ''''''''''''''''''''''   @media tablet nach desktop         ************** ******************
****************************************************************************
*****************************************************************************/

@media screen and (min-width: 938px) {
  .nav-main-mobile {
    position: fixed;
    top: 35px;
    right: 0.5rem;
    width: 51px;
    height: 41px;
    background-color: var(--color-navsub);
  }

  .footer-img {
    width: 17rem;
  }
  .footerbild1 {
    transform: rotate(19deg) translate(-13px, 35px);
    box-shadow: 5px 5px 14px 5px rgba(29, 31, 42, 0.69);
    width: 40%;
  }

  .article-kontakt {
    width: 85%;
    margin: 0 auto;
  }
  .footer-klecks {
    left: -9rem;
  }
  .c-footer__contact {
    transform: translate(0px, 26px);
    padding-left: 15px;
  }
}

/****************************************************************************
*****************************************************************************
* ''''''''''''''''''''''   @media desktop         ************** ******************
****************************************************************************
*****************************************************************************/

@media screen and (min-width: 1260px) {
  h1 {
    font-size: 3rem;
  }
  h2 {
    font-size: 1.5rem;
    text-align: center;
    background-color: var(--color-h2opacity);
    color: var(--c-fontlight);
    padding: 1rem;
  }
  .page-dunkelblau-gallery-page-img h2 {
    width: 100%;
    margin: 0.5rem;
  }

  .wrapper {
    grid-template-rows: auto auto 300px repeat(4, auto);
    position: relative;
  }
  .page-home-news,
  .page-dunkelblau-portfolio,
  .page-main-gallery,
  .page-dunkelblau-gallery-page,
  .page-main-dunkelblau,
  .page-main-bordeaux,
  .page-main-goldgelb,
  .page-main-petrol,
  .page-main-gruen {
    margin-top: 12px;
    margin-top: 0;
  }

  .page-main-gruen {
    margin-top: 0px;
    padding-top: 43px;
  }

  .page-main-gruen-box {
    width: 73%;
    margin: 0 auto;
  }

  /* content */
  .index-article-box,
  .page-home-news-post,
  .page-dunkelblau-portfolio-post,
  .page-main-gallery-img,
  .page-dunkelblau-gallery-page-img,
  .page-main-dunkelblau-img,
  .page-main-bordeaux-img,
  .page-main-petrol-img,
  .page-main-goldgelb-img,
  .page-dunkelblau-profil-img,
  .page-dunkelblau-portfolio-img,
  .page-dunkelblau-service-img,
  .page-main-gruen-img {
    height: auto;
  }

  .page-portfolio-gallery-img {
    height: max-content;
  }

  .index-article {
    margin-right: 0.2rem;
  }

  .textbox {
    display: flex;
    justify-content: center;
    margin: 6rem 0;
  }

  /*********************  Navigation Desktop**********************/
  #nav-main,
  #nav-dblau,
  #nav-gruen,
  #nav-bordeaux,
  #nav-terracotta,
  #nav-petrol,
  #nav-goldgelb {
    grid-column-start: 1;
    grid-column-end: 21;
    grid-row-start: 2;
    grid-row-end: 3;
    text-align: center;
    position: fixed;
    height: 48px;
    width: 100%;
    top: 39px;
    left: 0;
    right: 0;
    z-index: 900;
  }

  /* Mobiles Menü wird hier ausgeblendet */

  .nav-main-mobile {
    display: none;
  }

  /* Desktop-Navigation wird hier wieder aktiviert */
  #nav-main-desktop {
    display: inline-block;
    height: 51px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: inherit;
  }

  /******* Dropdown-Menü für Hauptnavigation (1. Ebene) ****/

  #nav-main-desktop ul li {
    float: left; /*  Wenn man flex möchte..... müsste man die unterlisten seperat in Flexboxen packen - 
                            ansonsten würde sich besser float machen*/
    list-style: none;
    position: relative;
  }
  #nav-main-desktop ul li a {
    float: left;
    font-size: 1rem;
    color: var(--c-fontlight);
    min-width: 9rem; /* Textmenüpunkt bei allen gleich min. groß */
    padding: 0.8rem;
    text-decoration: none;
    text-align: center;
    /*background-color: var(--color-01);    Color bei ausklappen des menüs */
  }
  #nav-main-desktop ul li:hover > a {
    /*  Ausklappen beim Hovern > gilt für alle a*/
    /* background-color: var(--color-06);   */
    color: var(--c-fonthighlight); /* Hover Schriftfarbe */
    border-bottom: solid 2px var(--c-menuactive);
  }

  /******* Dropdown-Menü für Hauptnavigation (2. Ebene) ****/
  /* Submenü ansprechen */
  #nav-main-desktop ul li ul {
    position: absolute; /* klebt direkt unter der Menüleiste */
    top: 100%;
    left: 0; /*  oben links */
    overflow: hidden;
    width: 300px;
    max-height: 0; /*  Nicht sichtbar- eingeklappt */
    background-color: var(--c-nav-bg-sub-drop);
    margin: 0 1rem 1rem 1rem;
  }

  #nav-main-desktop ul li:hover > ul {
    /* Alle KindElemente in der ersten List bei hovern */
    z-index: 989; /*  ist nur notwendig , wenn das menü hinter einem Element verschwindet */
    overflow: visible; /* sichtbar machen */
    max-height: 80rem; /*  Platz nach unten */
    max-width: 80rem;
    color: var(--c-fontdark);
    background-color: var(--color-navsub);
  }

  /******* Dropdown-Menü für Hauptnavigation (3. Ebene) ****/
  /* wiederholbar für jede weiter Ebene (+li ul)*/
  #nav-main-desktop ul li ul li ul {
    /*  Die dritte List wird nach rechts geklappt*/
    position: absolute;
    top: 0;
    left: 100%;
  }

  /*  Einzelne Elemente */
  .nav-main-sub-menu {
    padding: 0.2rem;
    font-size: 0.5rem;
    text-decoration: none;
    margin-right: 5rem;
    text-align: center;
  }

  .nav-main-sub-menu :hover {
    background-color: var(--c-fonthighlight);
    color: var(--c-fontdark);
  }

  .header,
  .header-dunkelblau,
  .header-gruen,
  .header-goldgelb,
  .header-petrol,
  .header-terracotta,
  .header-bordeaux {
    top: 0vh;
  }

  .header-brand-logo {
    width: 12%;
    position: fixed;
    top: 8px;
    left: 8px;
  }

  #menu-submenue-footer {
    /*  Flex footer subnav */
    margin-right: 10rem;
  }

  #menu-submenue-footer :hover {
    border-bottom: solid 1px var(--c-fonthighlight);
    color: var(--c-fonthighlight);
  }

  #menu-submenue-footer li {
    padding: 0.7rem 0.7rem 0.7rem 0.7rem;
    text-align: center;
  }
  #menu-submenue-footer li a:hover {
    color: var(--c-);
  }

  img,
  .wp-block-image img {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .footer-widget-center {
    width: 71%;
  }

  .footer-widget-center,
  .footer-widget-right {
    height: 20rem;
    padding: 0.8rem;
    margin-bottom: 0.9rem;
  }

  .footerbild1 {
    transform: rotate(19deg) translate(0px, 0px);
    box-shadow: 5px 5px 14px 5px rgb(29 31 42 / 69%);
    width: 34%;
  }

  .footerbild2 {
    transform: rotate(-17deg) scale(0.5) translate(-34px, 0px);
    box-shadow: 5px 5px 14px 5px rgba(29, 31, 42, 0.69);
    width: 15%;
  }
  .footerbild3 {
    transform: rotate(7deg) translate(0px, 12px) scale(0.55);
    box-shadow: 5px 5px 14px 5px rgba(29, 31, 42, 0.69);
  }

  .o-grid {
    margin-right: -0.5rem;
  }

  .attachment-profil-img {
    /*  Thumbnail im post */
    width: 100%;
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .page-dunkelblau-gallery-page img {
    width: 50%;
  }

  .page-main-bordeaux {
    margin-top: 52px;
    padding-top: 34px;
  }

  .kontaktbox {
    height: 30rem;
    width: 60vw;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    position: relative;
    padding: 1rem;
  }

  .page-main-gruen-profil-img {
    width: 80%;
  }

  .contact-form-left {
    position: absolute;
    top: 193px;
    left: 107px;
    transform: rotate(-9deg);
    box-shadow: 5px 5px 14px 5px rgba(29, 31, 42, 0.69);
    width: 40%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 0.5rem;
    background-color: var(--c-main);
  }

  .footer-widget-center {
    display: flex;
    justify-content: center;
  }
  .c-footer__contact {
    padding-left: 1rem;
    transform: translate(20px, 23px);
  }

  .footer-klecks {
    left: -3rem;
  }
  /* 
.aside,               
.aside-dark{
 display: block;
  grid-column-start: 17;
  grid-column-end: 21;
  grid-row-start: 4;
  grid-row-end: 6;
  padding: 2rem;
  margin-top: 40px;
  padding-right: 34px;
  margin-left: 0px;

} Sidebar grid für light und Dark */
}

/****************************************************************************
*****************************************************************************
* ''''''''''''''''''''''   @media big desktop         ************** ******************
****************************************************************************
*****************************************************************************/

@media screen and (max-width: 1350px) {
  .header-brand {
    width: 50%;
  }
}