/*======================================
Theme Name: Zakra Dirk Stamer
Theme URI: https://dirk-stamer.de
Description: Ein Child Theme für Zakra, welches verscheidene Anpassungen vornimmt
Version: 0.01dev
Author: Jan Bursitzke
Author URI: https://bursitzke.de
Template: zakra
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
======================================*/

/*background button color rgba(237,86,75,0.7) --> #e3000f
Button Background Color Hover rgba(237,86,75,1) --> #e3000f*/

/*Primärfarben
SPD Rot #E3000F (RAL 3020 Verkehrsrot)
SPD Weiß #ffffff
SPD Purpur #980267

Zusatzfarben
SPD Dunkelrot #B61C3E
SPD Dunkelgrau #333333
SPD Cyannlau #00B4CC
SPD MV blau #59809B*/

/*
:root {
    --zakra-color-1: #ffffff; --> Hintergrund
    --zakra-color-2: hsla(356, 100%, 45%, 0.8); --> SPD Rot mit 80% Deckkraft
    --zakra-color-3: #e3000f; --> SPD Rot
    --zakra-color-4: #980267; --> Lila
    --zakra-color-5: #b61c3e; --> Dunkelrot
    --zakra-color-6: #00b4cc; --> Hellblau
    --zakra-color-7: #59809b; --> Dunkelblau
    --zakra-color-8: #f4f4f4; --> Hellgraue Highlights
    --zakra-color-9: #170704; --> Dunkelgrau / Schrift
*/

/* ============================================================================= */
/*                 T A B L E   O F   C O N T E N T                               */
/* #0 Variables
   #1 General Layout
   #2 Typo
   #3 Lists
   #4 Buttons
   #5 Tables
   #6 Header
   #7 OSM Maps
   #8 WP Events
   #9 Blockart
   #10 Secondary Styles
   #11 Menu
   #12 Social

/* ============================================================================= */
/* ============================================================================= */
/*                   #0   V  A  R  I  A  B  L  E  S                              */
/* ============================================================================= */
/* ============================================================================= */
:root {
    --button-border-radius: 2px;
	--swiper-theme-color: var(--zakra-color-3);
	--color--primary: var(--zakra-color-3);
    --color--light--primary: var(--zakra-color-2);
}
/* EOF VARIABLES */

/* ============================================================================= */
/* ============================================================================= */
/*          #1   G  E  N  E  R  A  L     L  A  Y  O  U  T                        */
/* ============================================================================= */
/* ============================================================================= */
@media (max-width: 781px)  {
	.hide-on-mobile {
		display: none;
	}
}

@media (min-width: 782px)  {
	.hide-on-desktop {
		display: none;
	}
}

#page div.blockart-section {
	margin: 40px 0;
}

#page div.blockart-section div.blockart-container, 
#page div.mzb-slider .swiper {
	max-width: 1170px;
}

#primary div.blockart-section:last-child,
#primary div.wp-block-columns:last-child {
	margin-bottom: 0px;
}

/* ============================================================================= */
/* ============================================================================= */
/*                         #2     T  Y  P  O                                     */
/* ============================================================================= */
/* ============================================================================= */
h1, h2, h3, h4, h5, h6, .site-description {
				   
	/*color: #222;
	margin-bottom: 1em;	
	line-height: 1.2em;
	font-family: "Now"!important; */
	font-weight: 500;
}

h1, h2 {
	text-transform: uppercase;
}

/* END OF TYPO */

/* ============================================================================= */
/* ============================================================================= */
/*               #3   L  I  S  T  S                                              */
/* ============================================================================= */
/* ============================================================================= */
/* PRETTY ORDERED LISTS NUMBERING  - JBU 12.11.2019 */
ol {
  margin-left: 0;
  counter-reset: my-awesome-counter;
  list-style: none;
  padding-left: 13px;
}
ol li {
  margin: 0 0 0.5rem 0;
  counter-increment: my-awesome-counter;
  position: relative;
}
ol li::before {
  content: counter(my-awesome-counter);
  color: var(--zakra-color-1);
  font-size: 1.3rem;
  font-weight: bold;
  position: absolute;
  --size: 23px;
  left: calc(-1 * var(--size) - 10px);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  top: 0;
  background: var(--zakra-color-3);
  border-radius: var(--button-border-radius);
  text-align: center;
}

/* ============================================================================= */
/* ============================================================================= */
/*                       #4  B  U  T  T  O  N  S                                 */
/* ============================================================================= */
/* ============================================================================= */

#page button,
#page html input[type="button"],
#page input[type="reset"],
#page input[type="submit"],
#page .readmore-wrap,
#page .slider-wrap #slider-title a,
/*#page .btn-primary,*/
/*#page .blockart-button-wrapper .blockart-button,*/
#page .mzb-slider .swiper-button-prev, .mzb-slider .swiper-button-next,
#page .wp-block-button,
#zak-primary .zak-posts .entry-button
{
	color: var(--zakra-color-1)!important;
	border-radius: var(--button-border-radius)!important;
	font-size: 15px;
	background-color: var(--zakra-color-3);
    border-width: 0px;
    padding: 12px 30px;    
    text-transform: none;
    text-decoration: none;
    box-shadow: none;
	font-weight: normal;
	margin: 20px auto;
}

#page button svg,
#page html input[type="button"] svg,
#page input[type="reset"] svg,
#page input[type="submit"] svg,
#page .readmore-wrap svg,
#page .slider-wrap #slider-title a svg,
/*#page .btn-primary svg,*/
/*#page .blockart-button-wrapper .blockart-button svg,*/
#page .mzb-slider .swiper-button-prev, .mzb-slider .swiper-button-next svg,
#page .wp-block-button svg,
#zak-primary .zak-posts .entry-button svg {
	fill: var(--zakra-color-1)!important;
}

button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.readmore-wrap:hover,
.slider-wrap #slider-title a:hover,
.btn-primary:hover,
.blockart-button-wrapper .blockart-button:hover {
	background: var(--zakra-color-3)!important;
	opacity: 0.6!important;
	color: var(--zakra-color-1);
}

.blockart-button a.blockart-button-link.is-style-filled span.blockart-button-icon {
	margin-right: 15px;
}

/* BUTTONS ON MAPS */
.gm-style button {
	color: inherit!important;
}

.gm-style button:hover {
	color: var(--zakra-color-1)!important;
}
/* +/- SVG Controls .gm-style*/
.gm-style button:hover img {
	filter: brightness(5);
}


/* ============================================================================= */
/* ============================================================================= */
/*              #5    S  T  Y  L  E     T  A  B  L  E  S                         */
/* https://divtable.com/table-styler/                                            */
/* ============================================================================= */
/* ============================================================================= */
table.alteringTable {
  border: 0px solid #1C6EA4;
  background-color: var(--zakra-color-1);
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
table.alteringTable td, table.alteringTable th {
  border: 0px solid #AAAAAA;
  padding: 6px 6px!important;
}
table.alteringTable tr:nth-child(even) {
  background: #EEEEEE;
}
table.alteringTable thead {
  background: /*#ED564B*/var(--zakra-color-3);
}
table.alteringTable thead th {
  font-weight: normal;
  color: var(--zakra-color-1);
}
table.alteringTable tfoot {
  font-size: 15px;
  font-weight: bold;
  color: var(--zakra-color-1);
  background: /*#F58981*/var(--zakra-color-3);
}
table.alteringTable tfoot td {
  font-size: 15px;
}
table.alteringTable tfoot .links {
  text-align: right;
}
table.alteringTable tfoot .links a{
  display: inline-block;
  background: /*#ED564B*/var(--zakra-color-3);
  color: var(--zakra-color-1);
  padding: 2px 8px;
  border-radius: var(--button-border-radius);
}

/* EVENTS TABLES */
.css-events-list table.events-table th.event-time {
	width: 160px;
}

table.em-calendar td.eventful a, table.em-calendar td.eventful-today a {
	color: var(--zakra-color-3);
}

/* ============================================================================= */
/* ============================================================================= */
/*                 #6      H  E  A  D  E  R                                      */
/* ============================================================================= */
/* ============================================================================= */
/* ALWAYS KEEP TOP-BAR VISIBLE */
#zak-masthead .zak-row.zak-desktop-row.zak-main-header .zak-header-top-row
{
  position: fixed;
  top: 0;
  transition: padding 0.3s ease;
  z-index: 100;
  width: 100%;
}

.zak-header-top-row .btn-primary {
	margin: 0 15px;
    padding: 6px 16px 6px 20px;
}


.zak-header-builder .site-title {
	margin-bottom: 6px;
	margin-top: 20px;
    left: -3px;
    position: relative;
    font-weight: bold!important;
	font-size: 51px!important;
    line-height: 50px!important;
}
.zak-header-builder .site-title a {
	/*font-family: "Now"!important; */
}

#zak-masthead.zak-header-builder .zak-desktop-row .zak-header-main-row {
    padding-top: 100px;
    padding-bottom: 60px;
}

.zak-header-builder .zak-main-row .zak-header-right-col {
	padding-top: 25px;
}


/* SHOW ONLY SMALL CONTACT ICONS IN MOBILE VIEW */
@media screen and (max-width: 767px) {
	.header-info  {
		display: none;
	}
	
	.zak-header-top-row .social-icons i.fa-xing, .top-bar .social-icons i.fa-youtube {
	  display: inline-block;
	}
	
	.zak-header-top-row .social-icons i.fa-facebook, .top-bar .social-icons i.fa-twitter, 
	.zak-header-top-row .social-icons i.fa-instagram, .top-bar .social-icons i.fa-codepen {
	  display: none;
	}
}


#site-title a {
	font-family: "Now"!important; 
}


.social-icons i:hover {
 color: var(--zakra-color-1);
}

/* REPLACE SOCIAL MEDIA ICONS - JBU 18.02.2019*/
/* weibo ==> whatsapp */
.social-icons .fa-weibo:before {
    content: "\f232";
}

.social-icons i.fa-weibo:hover {
 background: #02e676;
}


/* tumbl ==> threema*/
.social-icons .fa-tumblr {
    height: 20px;
	width: 20px;
}

.social-icons .fa-tumblr:before {
    content: url('assets/Threema.svg');
	position: relative;
    top: 2px;	
}

.social-icons i.fa-tumblr:hover {
 background: #05a63f;
}

.social-icons i.fa-tumblr:hover:before {
 filter: brightness(0) invert(1);
}

/* codepen ==> tiktok */
.social-icons .fa-codepen:before {
    /*content: "\e07b";*/
	content: "";
}


/* Mail and Phone Icons for mobile view */

.social-icons .fa-youtube:before {
    content: "\f0e0";
}

.social-icons .fa-xing:before {
    content: "\f095";
}

.social-icons i.fa-xing, .social-icons i.fa-youtube {
  display: none;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.social-icons i.fa-xing:hover, .social-icons i.fa-youtube:hover {
	background: var(--zakra-color-3);
}



/* JBU 02.03.2020 */
figure.snip1206:hover:after, figure.snip1206.hover:after {
      -webkit-transform: skew(-45deg) scaleX(2);
    transform: skew(-45deg) scaleX(2);
}

/* ============================================================================= */
/* ============================================================================= */
/*                #7   O  S  M    M  A  P     S  t  y  l  i  n  g                */
/* ============================================================================= */
/* ============================================================================= */
.leaflet-map-pane .leaflet-tile-pane {
	filter: grayscale(1) brightness(1.02) contrast(1.07);
}

.marker-cluster-small,
.marker-cluster-small div,
.marker-cluster-medium,
.marker-cluster-medium div,
.marker-cluster-large,
.marker-cluster-large div{
 background-color: rgba(221, 51, 51, 0.603)!important;
 color: var(--zakra-color-1)!important;
}

.extra-marker i.caravanMarker {
	margin-top: 11px!important;
}

.extra-marker-circle-light-red {
	background-position: -36px 0!important;
}
.extra-marker-penta-light-red {
	background-position: -36px -138px!important;
}
.extra-marker-square-light-red {
	background-position: -36px -46px!important;
}
.extra-marker-star-light-red {
	background-position: -36px -92px!important;
}

.extra-marker i.fas {
    margin-top: 11px!important;
    margin-left: 2px;
}

.leaflet-marker-icon:has(.caravanMarker) {
    z-index: 666!important;
}
/* END OF OSM Styling */

/* ============================================================================= */
/* ============================================================================= */
/*         #8    W  P     E  V  E  N  T  S    P  L  U  G  I  N                   */
/* ============================================================================= */
/* ============================================================================= */
/* SEARCH */
.em-search-field {
	margin: 10px;
    max-width: 450px;
}

.em-search-submit {
	margin: 10px 10px 30px;
}
span.em-pagination  {
	margin-left: 20px;
}


/* CALENDAR */
div.css-search div.em-search-main .em-search-submit {
	background: var(--zakra-color-3);
	background-color: var(--zakra-color-3);
}

table.em-calendar td.eventful a,
table.em-calendar td.eventful-today a,
table.fullcalendar td.eventful a {
	color: var(--zakra-color-3);
}

table.fullcalendar td.eventful ul {
	list-style: none;
}

/* PLACES */
div.css-locations-list, div.em-search-main, div.css-events-list {
	margin-left: -10px;
	margin-right: -10px;
}

ul.em-locations-list li {
	padding: 10px;
    display: inline-block;
}

/* EVENTS */
.em-events-list-table {
	min-width: 300px;
	padding: 10px;
	display: inline-grid;
	width: 47%;
}

/* Branding*/
#em-final-clearer + p {
	margin: 0 auto;
	clear: both;
	max-width: 960px;
	box-sizing: border-box;
	position: relative;
	padding: 10px;
}

@media only screen and (max-width: 767px) {
	div.css-locations-list, div.em-search-main, div.css-events-list {
		margin-right: 0px;
		padding-right: 10px;
	}
	
	.em-events-list-table {
		width: 100%;
	}

}

.em-events-list-table:last-child:after {
	visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

th.event-time {
    min-width: 90px;
}



/* Events Manager OSM Admin Location Selection Fix */ 
@media only screen and (min-width: 750px) {
	#em-osm-admin-map-container {
		width: unset!important; 
		display: block!important;
	}

	.osm-location-table {
		display: block!important;
	}
}

/* ============================================================================= */
/* ============================================================================= */
/*                   #9     B  L  O  C  K    A  R  T                             */
/* ============================================================================= */
/* ============================================================================= */

/* BLOCKART - INFOCONTAINER */
.blockart-info-box {
    min-height: 295px;
}

.blockart-info-box .blockart-info-container .blockart-info-box-icon-wrapper .blockart-info-box-icon {
	background-color: var(--zakra-color-1);
    border-radius: 80px;
    padding-left: 25px;
    padding-right: 25px;
	fill: var(--zakra-color-3);
	border: none;
}

.blockart-info-box a .blockart-info-content , 
.blockart-info-box a:hover .blockart-info-content {
	color: var(--zakra-color-9);
}

.blockart-info-box .blockart-info-content .blockart-content-wrapper {
	margin-top: 0px;
}

.blockart-info-box.flip-icon .blockart-info-box-icon {
	transform: scaleX(-1);
}

/* If box is colored (added class "blockart-info-box-colored")*/
.blockart-info-box.blockart-info-box-colored .blockart-info-container .blockart-info-box-icon-wrapper .blockart-info-box-icon {
	background-color: transparent;
    border-radius: unset;
    padding-left: unset;
    padding-right: unset;
	fill: var(--zakra-color-1);
}

.blockart-info-box.blockart-info-box-colored .blockart-button-wrapper .blockart-button:hover {
	opacity: 1!important;
}
/* EO BLOCKART - INFOCONTAINER */

/* BLOCKART SECTION */
.blockart-section {
	padding: 3em 2em;
}
/* EO BLOCKART SECTION */

/* BLOCKART - ICON BLOCK ICON LIST & TIMELINE */
#zak-content .blockart-icon-list .blockart-icon-list-item {
	margin: 15px 0;
}

#zak-content .blockart-icon-list .blockart-icon-list-item:first-child {
	margin-top: 0;
}

#zak-content .blockart-icon-list.blockart-fill .blockart-icon-wrapper svg,
#zak-content .blockart-timeline .blockart-timeline-wrapper .blockart-control .blockart-timeline-marker, 
#zak-content .blockart-icon-block .blockart-icon-wrapper.blockart-fill-preset {
	background-color: var(--zakra-color-3);
	fill: var(--zakra-color-1);
	height: 55px;
	width: 55px;
	padding: 15px;
	z-index: 10;
}


#zak-content .blockart-icon-block .blockart-icon-wrapper.blockart-fill-preset svg {
	fill: var(--zakra-color-1);
}

#zak-content .blockart-timeline .blockart-timeline-wrapper .blockart-control .blockart-timeline-marker svg,
#zak-content .blockart-icon-block .blockart-icon-wrapper.blockart-fill-preset svg {
	width: 26px;
	height: 26px;
}

#zak-content .blockart-timeline .blockart-timeline-wrapper .blockart-control .blockart-timeline-content {
	padding: 12px 20px 0px
}

#zak-content .blockart-timeline .blockart-timeline-wrapper .blockart-control .blockart-timeline-content,
#zak-content .blockart-timeline .blockart-timeline-wrapper .blockart-control .blockart-timeline-marker:before {
	background-color: var(--zakra-color-1);
}

#zak-content .blockart-timeline .blockart-timeline-wrapper.layout-left .blockart-control .blockart-timeline-marker:before {
	left: 62px;
}

#zak-content .blockart-timeline .blockart-timeline-wrapper.layout-right .blockart-control .blockart-timeline-marker:before {
	right: 62px;
}

#zak-content .blockart-timeline .blockart-timeline-line {
	background-color: var(--zakra-color-3);
	display: none!important;
}

/* timeline */
#zak-content .blockart-timeline .blockart-timeline-wrapper .blockart-control {
	position: relative;
}

#zak-content .blockart-timeline .blockart-timeline-wrapper .blockart-control .blockart-timeline-content:before {
    position: absolute;
    top: 76px;
    content: '';
    height: 125%;
    border-left: 3px solid var(--zakra-color-1);
	z-index: 0;
}

#zak-content .blockart-timeline .blockart-timeline-wrapper.layout-center .blockart-control .blockart-timeline-content:before {
	left: 239px
}

#zak-content .blockart-timeline .blockart-timeline-wrapper.layout-left .blockart-control .blockart-timeline-content:before {
	    left: 164px;
}

#zak-content .blockart-timeline .blockart-timeline-wrapper.layout-right .blockart-control .blockart-timeline-content:before {
	    right: 164px;
}

#zak-content .blockart-timeline .blockart-timeline-wrapper .blockart-timeline-inner:last-child .blockart-control .blockart-timeline-content:before,
#zak-content .blockart-timeline .blockart-timeline-wrapper.no-timeline .blockart-control .blockart-timeline-content:before {
	border-left: 0!important;
}


/* hide dates when added "no-dates"*/
#zak-content .blockart-timeline .blockart-timeline-wrapper.no-dates .blockart-control .blockart-timeline-label-container {
	display: none;
}

/* EO BLOCKART - ICON LIST / TIMELINE */

/* ============================================================================= */
/* ============================================================================= */
/*               #10   S  E  C  O  N  D  A  R  Y     S  T  Y  L  E  S            */
/*   When adding "secondary" to certain elements, they are rendered differently
     this could either be that the element get rendered brighter (grey back-
	 ground and red icon, instead of red background and white icon), or that the
	 appearance is adjusted to look better on white background (certain elements
	 are rendered grey instead of white).                                        */
/* ============================================================================= */
/* ============================================================================= */



/* BLOCK ART Timeline and IconBox */
/* instead of red background with white icon
   a grey background with red Icon is used */
#zak-content .blockart-icon-list.blockart-fill.secondary .blockart-icon-wrapper svg,
#zak-content .blockart-timeline .blockart-timeline-wrapper.secondary .blockart-control .blockart-timeline-marker,
#zak-content .blockart-timeline .blockart-timeline-wrapper.secondary .blockart-control .blockart-timeline-marker svg,
#zak-content .blockart-timeline .blockart-timeline-wrapper.secondary .blockart-control .blockart-timeline-content,
#zak-content .blockart-timeline .blockart-timeline-wrapper.secondary .blockart-control .blockart-timeline-marker:before,
#zak-content .blockart-icon-block.secondary .blockart-icon-wrapper.blockart-fill-preset,
/* BLOCKART - PostSlider */
/* the excerpt boxes are grey instead of white */
/* funfact: add a ' ' to your CSS class. otherwise it won't work >< */
.mzb-slider.secondary .swiper .swiper-slide.style3 .mzb-post-content,
/* BUTTONS */
#page .mzb-slider.secondary .swiper-button-prev,
#page .mzb-slider.secondary .swiper-button-next,
#page .wp-block-button.secondary 
{
	background-color: var(--zakra-color-8);
	fill: var(--zakra-color-3);
	color: var(--zakra-color-3);
}

#zak-content .blockart-icon-block.secondary .blockart-icon-wrapper.blockart-fill-preset svg,
#page button.secondary svg,
#page html input[type="button"].secondary svg,
#page input[type="reset"].secondary svg,
#page input[type="submit"].secondary svg,
#page .readmore-wrap.secondary svg,
#page .slider-wrap.secondary #slider-title a svg,
/*#page .btn-primary svg,*/
/*#page .blockart-button-wrapper .blockart-button svg,*/
#page .mzb-slider.secondary .swiper-button-prev, .mzb-slider .swiper-button-next svg,
#page .wp-block-button.secondary svg 
{
	fill: var(--zakra-color-3);
}

#zak-content .blockart-timeline .blockart-timeline-wrapper.secondary .blockart-control .blockart-timeline-content:before {
	border-left-color: var(--zakra-color-8);
}


/* ============================================================================= */
/* ============================================================================= */
/*                   #11     M  E  N  U                                          */
/* ============================================================================= */
/* ============================================================================= */

#zak-primary-nav.zak-primary-nav ul .current_page_ancestor > a,
#zak-primary-nav.zak-primary-nav ul .current-menu-ancestor > a,
#zak-primary-nav.zak-primary-nav ul .current_page_item > a,
#zak-primary-nav.zak-primary-nav ul .current-menu-item > a {
	color: var(--zakra-color-3);
}
#zak-primary-nav.zak-primary-nav.zak-layout-1-style-2 > ul > li.current_page_ancestor > a::before,
#zak-primary-nav.zak-primary-nav.zak-layout-1-style-2 > ul > li.current-menu-ancestor > a::before,
#zak-primary-nav.zak-primary-nav.zak-layout-1-style-2 > ul > li.current_page_item > a::before,
#zak-primary-nav.zak-primary-nav.zak-layout-1-style-2 > ul > li.current-menu-item > a::before,
#zak-primary-nav.zak-primary-nav.zak-layout-1-style-3 > ul > li.current_page_ancestor > a::before,
#zak-primary-nav.zak-primary-nav.zak-layout-1-style-3 > ul > li.current-menu-ancestor > a::before,
#zak-primary-nav.zak-primary-nav.zak-layout-1-style-3 > ul > li.current_page_item > a::before,
#zak-primary-nav.zak-primary-nav.zak-layout-1-style-3 > ul > li.current-menu-item > a::before,
#zak-primary-nav.zak-primary-nav.zak-layout-1-style-4 > ul > li.current_page_ancestor > a::before,
#zak-primary-nav.zak-primary-nav.zak-layout-1-style-4 > ul > li.current-menu-ancestor > a::before,
#zak-primary-nav.zak-primary-nav.zak-layout-1-style-4 > ul > li.current_page_item > a::before,
#zak-primary-nav.zak-primary-nav.zak-layout-1-style-4 > ul > li.current-menu-item > a::before {
	background-color: var(--zakra-color-3);
 }
 

/* ============================================================================= */
/* ============================================================================= */
/*                   #12     S  O  C  I  A  L                                    */
/* ============================================================================= */
/* ============================================================================= */
.zak-header-builder .zak-header-top-row .social-icons a {
    font-size: 20px;
    padding: 0 5px;
}


/*
:root {
    --zakra-color-1: #ffffff; --> Hintergrund
    --zakra-color-2: hsla(356, 100%, 45%, 0.8); --> SPD Rot mit 80% Deckkraft
    --zakra-color-3: #e3000f; --> SPD Rot
    --zakra-color-4: #980267; --> Lila
    --zakra-color-5: #b61c3e; --> Dunkelrot
    --zakra-color-6: #00b4cc; --> Hellblau
    --zakra-color-7: #59809b; --> Dunkelblau
    --zakra-color-8: #f4f4f4; --> Hellgraue Highlights
    --zakra-color-9: #170704; --> Dunkelgrau / Schrift
*/