/*
Theme Name: Netzformat
Author: Netzformat Internetagentur
Author URI: http://www.netzformat.de/
Description: Individuelles Theme, responsive
Version: 1.0 (11-2025)
*/ 

@font-face {
	font-family: "NotoSansMono-Regular";
	src: url("fonts/NotoSansMono-Regular.ttf") format("truetype");
}
@font-face {
	font-family: "NotoSansMono-Medium";
	src: url("fonts/NotoSansMono-Medium.ttf") format("truetype");
}
@font-face {
	font-family: "NotoSansMono-Bold";
	src: url("fonts/NotoSansMono-Bold.ttf") format("truetype");
}
@font-face {
	font-family: "NotoSansMono-Black";
	src: url("fonts/NotoSansMono-Black.ttf") format("truetype");
}
@font-face {
	font-family: "NotoSans-Black";
	src: url("fonts/NotoSans-Black.ttf") format("truetype");
}
@font-face {
	font-family: "OpenSans-Light";
	src: url("fonts/OpenSans-Light.ttf") format("truetype");
}
@font-face {
	font-family: "OpenSans-Regular";
	src: url("fonts/OpenSans-Regular.ttf") format("truetype");
}
@font-face {
	font-family: "OpenSans-SemiBold";
	src: url("fonts/OpenSans-SemiBold.ttf") format("truetype");
}
@font-face {
	font-family: "OpenSans-Bold";
	src: url("fonts/OpenSans-Bold.ttf") format("truetype");
}
@font-face {
	font-family: "OpenSans-Italic";
	src: url("fonts/OpenSans-Italic.ttf") format("truetype"); 
}


/* TEMP */
#dateiname {
    position: absolute;
    left: 0px;
    top: 0px;
    color: #FFF;
    background-color: #000;
    z-index: 9999;
    padding: 5px;
    /* an-/ausschalten in functions.php */
}

/* Allgemein */
:root {
	--gruen:#006f64; /* alt */
	--gruen:#6b8448;
    --gruen:#597f3e;
    --gruen:#79b254; /* neu */
	--grau:#CCCCCC; 
	--grau:#bec3c7; 
	--lila: #a11de4;
	--kopf-hoehe:120px;
	--kopf-hoehe-aktiv:100px;
    --rand-mobil: 20px;
    --breite-block: 800px;
    --breite-block-breit: 1200px;
    --breite-kopf-fuss: 1400px;
}


* {
	box-sizing:border-box;
	border:0;
	margin:0;
	padding:0;
	outline:0;
   /* transition: all 0.3s; */

}

html {

}

body {
	font-family: "OpenSans-Regular";
	font-size:18px;
	background-color:#FFF;
	line-height:16px;
	color:#000;
	position:relative;
	overflow-x: hidden;
}

/* intern */
#admin-box {
	position:fixed;
	z-index:9999;
	top:160px;
	left:0px;
    padding-left: 20px;
}


.admin-button  {
	padding:10px 20px 10px 20px;
	color:#000;
	font-weight:bold;
	background-color:#FFF;
    border: 3px solid #000;
    margin-top: 20px;
    display: inline-block;
}

.admin-button a {
    color: #000;
}


a {
	text-decoration: none;
}


.link {
	text-decoration: none;
	border-bottom: 2px dotted;
	color: #000;
}

.link:hover {
	text-decoration: none !important;
	border-bottom: 2px solid;
}

.bildunterschrift {
	font-size: 0.9em;
}

i {
	font-family: "OpenSans-Italic";
	font-style:normal;
}

b, strong {
	font-family: "OpenSans-SemiBold";
	font-family: "OpenSans-Bold";
	font-weight:normal;
}

img {
	max-width:100%;
	height:auto;
	display:block;
}


/* ### Bereiche ### */
/* Boxen */
.box {
    padding-left: var(--rand-mobil);
    padding-right: var(--rand-mobil);
    padding-top: 80px;
    padding-bottom: 80px;
}

.block {
	max-width:var(--breite-block);
	margin:0 auto;
}

.block-breit {
	max-width:var(--breite-block-breit);
	margin:0 auto;
}


/* Inhaltsbereiche */
#kopf, #fuss {
	width:100%;
	max-width: var(--breite-kopf-fuss);
	margin:0 auto;
    border: 0px solid var(--grau);
    padding: 0px 20px 0px 20px;
}



/* ### Header ### */
/* muss zuerst stehen: */
.home #kopf-box {
    background-color:transparent ;
    box-shadow: none;
    transition: background-color 1.5s;
    z-index: 9;
}

.home #logo-wort svg, 
.home #logo-wort-zusatz {
    color: #FFF;
}



.home #hauptnavi ul li a {
	color:#FFF;
    background-color: transparent;
}

.home #hauptnavi a:hover,
.home #hauptnavi .current-menu-ancestor a:not(.sub-menu a),
.home #hauptnavi .current-menu-item a {
	color:#000;
    background-color: #FFF;
}
/* /zuerst stehen */

#kopf-box,
.aktiv #kopf-box {
    height: var(--kopf-hoehe);
	position: fixed;
    top: 0;
    left: 0;
    right: 0;
	z-index:9; 
    box-shadow:  0 6px 20px 0 rgba(100, 100, 100, 0.19);
    background-color: #FFF;
    color: #000;
} 

#kopf {
    position: relative;
    height: var(--kopf-hoehe);
	z-index:9;
}

#logo {
    position: relative;
    margin: 5px 0px 0px 0px;
    display: block;
    border: 0px solid #CCC;
}

#logo-bild svg,
.aktiv #logo-bild svg {
    color: var(--grau);
    color: #000;
    width: 130px;
    height: auto;
    position: absolute;
    top: -15px;
    right: -190px;
}

#logo-wort svg,
.aktiv #logo-wort svg  {
    width: 400px;
    height: auto;
    position: absolute;
    top: 8px;
    left: 68px;
    color: #000;
}


#logo-wort-zusatz,
.aktiv #logo-wort-zusatz {
    position: absolute;
    top: 65px;
    left: 72px;
	font-family: "NotoSansMono-Regular";
    font-size: 0.8rem;
    color: #000;
}

#headerbild-box {
	position: relative;
	margin-top: var(--kopf-hoehe);
	overflow: hidden;
	margin: 0 auto;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	background-color: var(--grau);
	max-width: 1450px;
}

#headerbild {
	height: 450px;
    background-attachment: fixed;
}


/* Hintergrundebene bei Projekten animiert */
#headerbild-inner {
	height: 100%;
	width: 100%;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	transition: transform 1.5s ease-out, filter 1.5s ease-out; /* sanfter Übergang */
    animation: projektHeaderAnim 2s ease-out 0.3s forwards;
}

@keyframes projektHeaderAnim {
	from {
		transform: scale(1);
		filter: blur(0) grayscale(0);
	}
	to {
		transform: scale(1.2);
		filter: blur(5px) grayscale(50%);
	}
}


/* ############## Navigation ################*/
#burger {
    display: none;
}

#schliessen {
    display: none;
}

#hauptnavi {
	position:absolute;
    top: 60px;
    right: 20px;
}

#hauptnavi ul {
	display:flex;
	justify-content:space-between;
}

#hauptnavi ul li {
	list-style:none;
    position: relative;
}

#hauptnavi ul li a {
    font-family: "OpenSans-SemiBold";
    font-size: 1.2rem;
    padding: 5px 20px 5px 20px;
    border-radius: 25px;
    margin-left: 8px;
	transition: background-color 1.3s;
}

/* Navilink-Farben, normal, hover, aktiv */
/* alle Seiten außer Start */
#hauptnavi ul li a,
.aktiv #hauptnavi ul li a {
	color:#000;
    background-color: #FFF;
}

#hauptnavi a:hover,
.aktiv #hauptnavi a:hover,
#hauptnavi .current-menu-ancestor a:not(.sub-menu a),
.aktiv #hauptnavi .current-menu-ancestor a:not(.sub-menu a),
#hauptnavi .current-menu-item a,
.aktiv #hauptnavi .current-menu-item a {
	color:#FFF;
    background-color: #000;
}
/* ############## /Navigation ################*/



/* ############## Inhalt ################*/
.inhalt-box {
	border: 0px solid #CC0000;
}

.inhalt {
    text-align: left;
    line-height: 1.7em;
    position: relative;

}

.single-projekte .inhalt {
    text-align: center;
} 


.inhalt h1 {
	font-family: "NotoSansMono-Medium";
	font-weight:normal;
	font-size:3.0rem;
	line-height:1.3em;
    background-color: #FFF;
    padding: 20px 40px 0px 40px;
    padding: 20px 40px 0px 0px;
    border-radius: 10px;
    text-align: center;
    text-align: left;
    z-index: 1;
	margin:-50px 0px 40px 0px;
	margin:-130px 0px 40px 0px;
	margin:-50px 0px 40px 0px;
}

.inhalt h1 strong {
	font-family: "NotoSansMono-Medium";
	font-family: "NotoSansMono-Black";
	font-family: "NotoSans-Black";	
}

.single-projekte h1 {
	font-family: "NotoSansMono-Bold";
	font-weight:normal;
	font-size:2.5rem;
	line-height:1.2em;
	margin:0px 0px 20px 0px;
    hyphens: auto;
}

.home h1 {
    text-align: center;
}


 h2 {
	font-weight:normal;
	font-size:1.8rem;
	line-height:1.3em;
	margin:30px 0px 20px 0px;
}

 h2 strong {
 	font-family: "NotoSans-Black";
}

.inhalt p {
    margin-bottom: 20px;
}

.inhalt p a {
	color: #000;
	border-bottom: 2px dotted;
}

.inhalt p a:hover {
	color: var(--gruen); 
}

/* Listenpunkte */
.inhalt ul {
  list-style: none;
  margin: 0px 0px 20px -10px;
}

.inhalt li {
  position: relative;
  padding-left: 50px; 
  margin: 15px 0px 15px 0px;
}

.inhalt li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 30px;
  height: 30px;
  background-color: #000;
  mask: url("grafik/logo-bild.svg") no-repeat center / contain;
  -webkit-mask: url("grafik/logo-bild.svg") no-repeat center / contain;
    
}


.leistung ul {
  list-style: none;
  margin: -8px 0px 0px 0px;
}

.leistung li {
  position: relative;
  padding-left: 25px; 
  margin: 10px 0px 10px 0px;
  font-size: 0.9rem;
}

.leistung li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0px;
  width: 15px;
  height: 15px;
  background-color: #000;
  mask: url("grafik/logo-bild.svg") no-repeat center / contain;
}

a.leistung {
    color: #000;
}

.postid-486 h1 {
    hyphens: auto;
}



#spalten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 3.5rem;
    padding: 80px 0px 80px 0px;
}

#spalte-links {
    line-height: 1.5em;
    padding: 0px 20px 0px 20px;
}

.inhalt #spalte-links {
    text-align: left;
}

#spalte-links h1 {
	font-family: "NotoSansMono-Bold";
	font-weight:normal;
	font-size:2.5rem;
	line-height:1.2em;
	margin:0px 0px 0px 0px;
    padding: 0;
    hyphens: auto;
    text-align: left;
}

#spalte-rechts {
    margin: 0px 0px 0px 0px; 
}

.page-id-27 #spalte-links {
    background-color: var(--grau);
    padding-top: 0px;
    border-radius: 0px;
    background-color: transparent;
    padding-left: 50px;
}



/* ### Footer ### */
#fuss-box {
	padding: 120px 20px 120px 20px;
    background-color: #474D54;
    background-color: #373C41;
    background-color: #000;
}

#fuss {
	display:grid;
	grid-template-columns:1fr 2fr 1fr;
	column-gap:50px;
    color: #FFF;
    /* Grid Areas für Desktop */
    grid-template-areas: "links mitte rechts";
    position: relative;
}


#nach-oben  {
    display: block;
	position:absolute;
	right:0px;
	top:-20px;
    border: 0px solid #CCC;
}

#nach-oben svg {
    width: 50px;
    height: auto;
	transition:	padding 0.3s;
    padding: 30px 0px 0px 0px;
    color: #FFF;
}

#nach-oben svg:hover {
    padding: 0px 0px 30px 0px;
}






#fuss .links  { grid-area: links; }
#fuss .mitte  { grid-area: mitte; }
#fuss .rechts { grid-area: rechts; }


#metanavi {

}

#metanavi a {
    font-family: "NotoSansMono-Bold";
    color: #FFF;
}

#metanavi a:hover,
#metanavi .current-menu-item a,
#metanavi .current-page-ancestor a {
    text-decoration: none;
    border-bottom: 3px dotted #FFF;
}

#metanavi ul li {
	list-style:none;
    padding: 0px 0px 30px 0px;
}

#fuss-mitte {
    text-align: center;
    line-height: 1.5em; 
}

#fuss-titel {
	font-family: "NotoSansMono-Medium";
    font-size: 1.8em;
    line-height: 1.3em;
}

#fuss-titel strong {
    font-family: "NotoSansMono-Black";
}

#fuss-rechts {
    text-align: right;
}

#fuss-rechts .icon {
    height: 30px;
    width: auto;
    display: inline-block;
    margin-left: 20px;
}



/* ##### Sonderbereiche ##### */
/* ##### Single Projekte ##### */
.single-kunde {
    
}

.single-kunde a {
    font-weight: bold;
    border-bottom: 0px dotted #000;
}

.single-kunde a:hover {
    border-bottom: 2px dotted #000;
}

.single-online {
	font-size: 0.8rem;
	margin: 0px 0px 0px 0px;
	font-style:italic;
}

.single-leistungen {
    margin: 20px 0px 0px 0px;
}

.single-auftraggeber {
    margin: 20px 0px 0px 0px;
    
}

.single-kategorien {
    margin: 20px 0px 0px 0px;
}

.single-thumb {
    margin: 0px 0px 0px 0px;
    font-size: 0.8rem;
}

.single-thumb img {
    width: 100px;
    height: auto;
    border-radius: 10px;
}

.single-bilder {
    background-color: var(--grau);
    padding: 30px 20px 20px 20px;
    border-radius: 0px;
}

.single-bild {
    margin: 0px 0px 70px 0px;
    padding: 0px 0px 10px 0px;
    text-align: center;
}

.single-bild img {
    transition: transform 0.3s;
    border-radius: 10px;
    border: 1px solid var(--grau);
}

.single-bild:hover img {
    /* transform: scale(1.04); */
    transform: translateY(-5px);
}



a .single-bu,
.single-bu {
    margin: 10px 0px 0px 0px;
    display: inline-block;
    color: #000;
    font-size: 1.2rem;
	line-height: 1.3em;
	font-family: "OpenSans-SemiBold";
	border-bottom: 3px dotted var(--grau);
}

a:hover .single-bu {
	border-bottom: 3px dotted #000;
}

hr {
    height: 0;
    margin: 0px 0px 20px 0px;
    border-bottom: 5px dotted #000;
}

.grid-titel  {
  grid-column: 1 / -1;
  text-align: center; 
}

.grid-titel h2  {
    line-height: 1.3em;
    font-size: 2.5rem;
    margin: 0px 0px 20px 0px;
}

.grid-titel h1 {
    margin: 0px 0px 25px 0px;
    line-height: 1.3em;
    	font-family: "NotoSansMono-Bold";
}

.grid-titel a {
    color: #000;
    font-weight: bold;
    border-bottom: 2px dotted #000;
}



/* ##### Zahlen ##### */
#zahlen-box {
    background-color: var(--grau);
	background-image: url("grafik/hg-blass.jpg");
	background-image: url("grafik/hg-gruen.jpg");
	background-size: cover;
	background-attachment: fixed;
}

#zahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    column-gap: 50px;
    row-gap: 20px; /* für mobil */
    align-items: stretch;
}

.zahl {
    background-color: #FFF;
    color: #000;
    padding: 40px 0px 40px 0px;
    text-align: center;
    line-height: 3.5em;
    border-radius: 10px;
    border: 0px dotted #000;
    transition: all 0.3s;
}

.zahl-zahl {
    font-family: "NotoSansMono-Bold";
	font-family: "NotoSans-Black";
    font-size: 4.0rem;
    color: #999999;
}

.zahl-text {
    font-size: 1.5rem;
    color: #000;
}

.zahl:hover {
      transform: translateY(-5px);
}

.zahl:hover .zahl-zahl {
    color: var(--gruen);
}



/*** Leistungen ***/
#leistungen-box {
    background-color:var(--grau);
}

#leistungen {
	display:grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: stretch; 
	gap: 50px;
    border: 0;
}

.leistung {
    background-color: #FFF;
    border: 0px solid #000;
    padding: 30px 30px 30px 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(100, 100, 100, 0.2), 0 6px 20px 0 rgba(100, 100, 100, 0.19);
    transition: transform 0.3s;
    display: block;
    height: 100%;
    transition: all 0.3s; 
}

.leistung:hover {
    transform: translateY(-15px);
}

.leistung-icon,
.mehr {
    transition: color 0.3s; 
}

.leistung:hover .leistung-icon {
    color: var(--gruen);
}

.leistung:hover .mehr {
    color: var(--gruen);
}

.leistung-icon {
    margin-bottom: 30px;
    color: #000;
}

.leistung-icon svg {
  display: block;
  margin: 0 auto; 
  width: 120px;  
  height: auto;
}

.leistung-titel {
    font-size: 1.5rem;
    font-weight: bold;
	text-align: center;
    line-height: 1.2em;
    hyphens: auto;
}

.leistung-text {
    margin: 20px 0px 20px 0px;
    line-height: 1.2em;
}

.mehr {
    margin-top: 20px;
    font-size: 1.1rem;
    font-weight: bold;
	text-align: center;
}




.box-grau {
    background-color:var(--grau);
    padding: 50px 0px 100px 0px;
}

.box-grau h2 {
    text-align: center;
    margin-bottom: 50px;
}



.element-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, 300px);
  gap: 30px;
  justify-content: center;
}


.element {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
    margin-top: 10px;
       transition: transform 0.3s;
}

.element:hover {
        transform: translateY(-5px);
}

.element-bild {
  position: relative;
  aspect-ratio: 1 / 1;
}

.element-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.element-button {
  position: absolute;
  inset: auto 12px 12px auto;
  z-index: 1;
}

.element-text {
  flex: 1 1 auto;
  padding: 30px 20px 30px 20px;
  display: flex;
  flex-direction: column;
    border-top: 10px solid var(--grau);
    line-height: 1.3em;
}

.element-zusatz {
    margin: 30px 0px 0px 0px;
    font-size: 1.0rem;
}

.element-text a {
    color: #000;
}

.element-text a:hover {
    border-bottom: 2px dotted #000;
}


.element h3 {
    font-family: "NotoSansMono-Bold";
    font-size: 1.8rem;
    font-weight: normal;
    margin: 10px 0px 15px 0px;
}

.element h3 strong {

}

.element .kontakt-element {
    margin: 20px 0px 0px 0px;
}

.element-footer {
  margin-top: auto;   /* schluckt den freien Platz darüber → dockt unten an */
  padding-top: 30px;  /* Mindestabstand zum Text darüber */
    font-size: 1.0rem;
}

/* Breakpoints, falls du feste Spalten willst */
@media (max-width: 900px) {
  .element-box { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .element-box { grid-template-columns: 1fr; gap: 16px; }
}












/*** Projekte ***/
#projekte-box {
/*    background-color: #CCC; */
    background-color: transparent; 
    background-color: var(--grau);

}

#projekte {
	display:grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	column-gap:50px;
	row-gap:80px;
    border: 0;
    

}

.projekt {
    background-color: #FFF;
    padding: 0px 0px 80px 0px;
    transition: all, 0.8s;
    z-index: 1;
    position: relative;
}

.projekt:hover {
/*    transform: scale(1.05); */
}

.projekt-bild {
    overflow:  hidden; 
}

.projekt-bild img {
    transition: all, 0.5s;
    transform: scale(1.5);
    filter: blur(2px) grayscale(50%);
     object-fit: cover;
    height: 240px;
}

.projekt:hover .projekt-bild img {
    transform: scale(1.0);
    filter: blur(0) grayscale(0);
}

.projekt-info {
    padding: 0px 20px 20px 20px;
    border-top: 10px solid var(--grau);
}

.projekt-branche {
}

.projekt-branche a {
	font-size: 0.8em;
	color: #000;
	border-bottom: 2px solid #FFF;
    margin: 15px 0px 0px 0px;
	display: inline-block;
}

.projekt-branche a:hover {
	border-bottom: 2px dotted;
}

h2.projekt-titel {
	font-weight: normal;
	font-size:1.4rem;
	line-height:1.3em;
	margin:5px 0px 10px 0px;
	font-family: "OpenSans-SemiBold";
    font-family: "NotoSansMono-Bold";
    hyphens: auto;
}

.projekt-titel a {
    color: #000;
}

.projekt-titel a:hover {
    border-bottom: 2px dotted #000;
}

.projekt-kunde {
    font-size: 0.9rem;
    line-height: 1.2em;
    color: #666;
}

.projekt-kategorien {
    position: absolute;
    font-size: 0.9rem;
    left: 20px;
    bottom: 20px;
}


/* Ausgabe Taxonomien */
#projekt-taxonomien {
    padding-top: 20px;
    
}

#projektkategorie-liste {
    margin-top: 20px;
    margin-bottom: 20px;
}



/* Buttons aus Links a */
.button-gross {
    font-weight: bold;
    padding: 10px 15px 10px 15px;
    display: inline-block;
    border-radius: 25px;
    margin-top: 20px;
    border: 2px solid #000;
    line-height: 1.1rem;
}

.button-klein {
    padding: 2px 12px 2px 12px;
    border-radius: 20px; 
    font-size: 0.8rem;
    display: inline-block;
    margin: 5px 5px 0px 0px;
    border: 2px solid #000;
    text-decoration: none;
    line-height: 1.1rem;
}

.button-hell {
    color: #000;
    background-color: #FFF;
}

.button-hell:hover, 
.button-hell.aktiv {
    color: #FFF !important;
    background-color: #000;
    text-decoration: none !important;
}

.button-dunkel {
    color: #FFF;
    background-color: #000;
}

.button-dunkel:hover,
.button-dunkel.aktiv {
    color: #000;
    background-color: #FFF;
    text-decoration: none !important;

}


/* Kunden */
#kunden-box {
    background-color: var(--grau);
    padding: 40px 20px 40px 20px;
}

#kunden {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	column-gap:50px;
	row-gap:80px;
	align-items: stretch; /* sorgt für gleiche Höhe */
}

.home #kunden {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.kunde {
    position: relative;
    transition: transform 0.2s ease;
    padding-bottom: 50px;
    border-bottom: 0px dotted #000;
    background-color: #FFF;
    border-radius: 5px;
    border-radius: 0px;
}

.kunde:hover {
    transform: translateY(-5px);
}

.kunde:hover img {

}

.kunde-logo-box {
    background-color: #FFF;
    border-radius: 0px;
    
}

.kunde-logo {
    width: 200px;
    height: 100px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0px 15px 0px;
}

.kunde-logo img {
    max-width: 100%;
    max-height: 100%;
    min-width: 95%;
    min-height: 95%;
    object-fit: contain;

}

.kunde-info-box  {
    padding: 10px 10px 0px 10px;
    text-align: left;
    border-top: 5px solid var(--grau);
}

.kunde-name  {

}

.kunde-name a {
    line-height: 1.3em;
    font-size: 0.9rem;
    text-decoration: none;
    color: #000;
    border-bottom: 2px dotted #FFF;
    font-family: "NotoSansMono-Bold";
    font-family: "OpenSans-SemiBold";
    font-family: "OpenSans-Regular";
    font-family: "NotoSansMono-Regular";
	font-family: "NotoSansMono-Medium";
	hyphens: auto;
}

.kunde-name a:hover {
    text-decoration: none;
    border-bottom: 2px dotted #000;
}

.kunde-ort  {
    color: #666;
    margin-top: 5px;
    font-size: 0.8rem;
}

.kunde-projekt {
    position: absolute;
    bottom: 10px;
    left: 10px;
}



/* Kontaktformular *//* Container & Form */
.wpcf7 {

}

.wpcf7-form {
    padding: 0rem;
    border-radius: 0px;
/*    background-color: #FFF; */
}

/* Labels */
.wpcf7-form label {
    display: block;
    margin-bottom: 0.5rem;
}

/* Input Felder & Textarea */
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-select,
.wpcf7-form-control.wpcf7-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 0px solid #ddd;
    border-radius: 5px;
    background: #fff;
    font-size: 1rem;
    font-family: "OpenSans-Regular";
}

/* Focus State */
.wpcf7-form-control:focus {
    outline: none;
    border-color: #0066cc;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 1.0);
}

/* Textarea */
.wpcf7-form-control.wpcf7-textarea {
    min-height: 120px;
    resize: vertical;
}

/* Select Dropdown */
.wpcf7-form-control.wpcf7-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23333' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}


/* Paragraphen Abstände */
.wpcf7-form p {
    margin-bottom: 1.5rem;
}

/* Checkbox */
.wpcf7-acceptance {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.wpcf7-acceptance input[type="checkbox"] {
    margin-top: 0.25rem;
    width: 22px;
    height: 22px;
    cursor: pointer;
}

.wpcf7-list-item-label {
}

.wpcf7-list-item-label a {
}

.wpcf7-list-item-label a:hover {

}

/* Submit Button */
.wpcf7-submit {
    background: #FFF;
    color: #000;
    padding: 0.875rem 2rem;
    border: none;
    border-radius: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background 0.3s, transform 0.1s;
    width: 100%;
}

.wpcf7-submit:hover:not(:disabled) {
    background: #000;
    color: #FFF;
    
}

.wpcf7-submit:active:not(:disabled) {
    transform: translateY(1px);
}

.wpcf7-submit:disabled {
    background: #ccc;
    background: var(--grau); 
    cursor: not-allowed;
    border: 1px solid #000;
}

/* Spinner */
.wpcf7-spinner {
    margin-left: 0.5rem;
}

/* Response Messages */
.wpcf7-response-output {
    padding: 1rem;
    border-radius: 10px;
    border-left: 4px solid #0066cc;
}

.wpcf7-mail-sent-ok {
    background: #d4edda;
    border-color: #28a745;
    color: #155724;
}

.wpcf7-validation-errors,
.wpcf7-acceptance-missing {
    background: #fff3cd;
    border-color: #ffc107;
    color: #856404;
}

.wpcf7-mail-sent-ng {
    background: #f8d7da;
    border-color: #dc3545;
    color: #721c24;
}

/* Fehlermeldung unter dem Feld */
.wpcf7-not-valid-tip {
    color: #AF0919;
    font-size: 1.0rem !important;
    display: block;

}

/* Feld mit Fehler - roter Rahmen */
.wpcf7-form-control.wpcf7-not-valid {
    border: 0px solid #000;
/*    background-color: #fff5f5; */
}

/* Optional: Fehler-Icon vor der Meldung */
.wpcf7-not-valid-tip::before {
    content: "⚠ ";
    margin-right: 0.25rem;
}



select, option {
	font-family: "Open Sans", Arial, sans-serif;
    background-color: #FFF;
}




/*** Startseite **/
/* Video */
.video-container {
      position: relative;
      max-width: 1600px;     /* beliebige Breite */
      height: 700px;    /* beliebige Höhe */
      overflow: hidden;
    }

.video-container video {
      position: absolute;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      transform: translate(-50%, -50%);
      object-fit: cover;
      z-index: 0;
    }

.home .inhalt {
    text-align: center !important;
}



/* Störer */
#stoerer {
    position: absolute;
	bottom: 110px;
    right: 15%;
    text-align: right;
    color: #FFF;
	background-color: rgba(0,0,0,0.3);
	padding: 60px;
    border-radius: 10px;
    z-index: 2;
    animation: slideIn 1s cubic-bezier(.68,-0.55,.27,1.55) forwards;
}

#stoerer-titel {
    font-size: 3.5rem;
    line-height: 1.1em;
    font-family: "NotoSansMono-Bold";
	font-family: "NotoSans-Black";	
    font-family: "OpenSans-Bold";
}

#stoerer-text {
    font-size: 1.0rem;
    line-height: 1.5em;
    margin-top: 10px;
}

 @keyframes slideIn {
    0% {
      transform: translateX(-100%); 
      opacity: 0;
    }
    60% {
      transform: translateX(3%); 
      opacity: 1;
    }
    80% {
      transform: translateX(-1%);
    }
    100% {
      transform: translateX(0); 
    }
  }



/* Kontakt Boxen */
.kontakt-box {
	background-color: var(--grau);
	color: #000;
	padding: 0px 0px 0px 0px;
	max-width: 1500px;
	max-width: var(--breite-kopf-fuss); 
    
	border-radius: 10px;
    margin: 0 auto;

/*     
    background-image: linear-gradient(to bottom right, #999, #e4e4e4); 
	max-width: 1500px;
	border-radius: 10px;
	border-top: 0px dotted #000;
	border-bottom: 0px dotted #000;
	margin: 0 auto ;
*/
}

/* Kontakt Boxen */
.kontakt-box {
/*    background-image: url("grafik/hg-blass.jpg"); 
	background-size: cover;
	background-attachment: fixed;
*/
	background-color: var(--grau);
    
}

.kontakt {
    display: grid;
    grid-template-columns: 3fr 5fr;
    gap: 40px;
    align-items: center;
    border: 0px solid #000;
}

.kontakt img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}


.kontakt-titel {
    font-family: "NotoSansMono-Bold";
	font-family: "NotoSansMono-Medium";
    font-size:2.3rem;
    font-weight: bold;
    line-height: 1.3em;
    margin: 30px 0px 10px 0px;
}
.kontakt-text {
    padding: 20px;
}
.kontakt-titel strong {
	font-family: "NotoSans-Black";
}

.kontakt-info {
    margin: 50px 0px 0px 0px;    
}

.kontakt-element {
    display: flex;
    align-items: flex-start; 
    column-gap:10px;
    margin-top: 10px;
    margin-left: 20px;
}

.kontakt-element .icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.page-id-27 .kontakt-element .icon {
    margin-top: 6px;
}


.kontakt-element a {
	color: #000;
}

.kontakt-element a:hover {
	border-bottom: 3px dotted #000;
}

#osm {
    border-radius: 10px;
    border: 20px solid var(--grau);
    border: 3px solid #000;
    border: 0px solid #000;
}

#osm:hover {
transform: translateY(-10px);
}

.anti-bot {
    display: none !important;
}



/* Startseite Kunden */

.home #kunden {
	row-gap:40px;
}

.home .kunde {
    padding-bottom: 0;
    border-bottom: 0;
	background-color: #FFF;
	border-radius: 0px;

}

.home .kunde img {
/*	filter: grayscale(100%) opacity(0.8); */
	filter: opacity(0.8);
}

.home .kunde:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transform: translateY(-6px);
}

.home .kunde:hover img {
	filter: grayscale(0%) opacity(1.0);
}



/* Bookly Terminbuchung */
.bookly-css-root {
    background-color: var(--grau);
    background-color: #f2f2f2; 
    background-color: #E6E8EA; 
    padding: 30px;
    border-radius: 10px;
}

.bookly-css-root label {
    font-weight: bold !important;
}

.bookly-css-root select, 
.bookly-css-root option, 
.bookly-css-root input {
	font-family: "Open Sans", Arial, sans-serif;
    background-color: #FFF;
}

.bookly-css-root .iti__country-container {
    display: none;
}

/* BLOG - Startseite */
#blog-box {
    background-color: var(--grau);
    padding: 50px 0px 50px 0px;
}

/* --- Section-Wrapper ------------------------------------------ */

.nf-blog-section {
    padding: 4rem 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}


/* --- Kategorie-Header (nur im Archiv-Modus sichtbar) ---------- */

.nf-cat-header {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
}

.nf-cat-header__label {
/*    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #1D9E75;
    margin-bottom: 0.3rem;
    */
}

.nf-cat-header__name {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a18;
    margin: 0;
}

.nf-cat-header__desc {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #5f5e5a;
    margin: 0;
    max-width: 56ch;
}


/* --- Grid ----------------------------------------------------- */

.nf-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    /* max-width direkt hier – greift unabhängig vom äußeren Wrapper */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 900px) {
    .nf-blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .nf-blog-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Card (vollständig verlinkt) ------------------------------ */

.nf-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: #ffffff;
    border: 0px solid #e8e8e4;
    border-radius: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.nf-card:hover,
.nf-card:focus-visible {
    transform: translateY(-4px);
    outline: none;
}


/* --- Bild-Bereich --------------------------------------------- */

.nf-card__image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f0efea;
    border-bottom: 5px solid var(--grau);
}

.nf-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

/* Platzhalter wenn kein Artikelbild vorhanden */
.nf-card__img-placeholder {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        -45deg,
        #f0efea,
        #f0efea 6px,
        #e8e7e2 6px,
        #e8e7e2 12px
    );
}


/* --- Kategorie-Badge ------------------------------------------ */

.nf-card__category {
    position: absolute;
    top: 12px;
    left: 12px;
}


/* --- Textbereich ---------------------------------------------- */

.nf-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.25rem 1.375rem 1.375rem;
    gap: 0.5rem;
}

.nf-card__title {
    font-size: 1.2rem;
    line-height: 1.2;
    color: #1a1a18;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nf-card__excerpt {
    font-size: 0.875rem;
    line-height: 1.65;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nf-card__readmore {
    font-size: 0.8rem;
    font-weight: 600;
    color: #000;
    margin-top: 0.375rem;
    align-self: flex-start;
    transition: letter-spacing 0.2s ease;
}

.nf-card:hover .nf-card__readmore {
    letter-spacing: 0.06em;
}


/* --- Pagination ----------------------------------------------- */
/*
   Selektor bewusst ohne .nf-blog-section-Abhängigkeit –
   funktioniert unabhängig vom jeweiligen Wrapper-Kontext.
*/

.navigation.pagination {
    margin-top: 3rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    padding: 0 1.5rem;
}

.navigation.pagination .nav-links {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    justify-content: center;
}

.navigation.pagination .nav-links a,
.navigation.pagination .nav-links span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
    white-space: nowrap;
    padding: 10px 15px;
    border-radius: 25px;
    line-height: 1.1rem;
    color: #fff;
    background-color: #000;
    font-size: 0.9rem;
}

.navigation.pagination .nav-links a:hover {
    color: #000;
    background-color: #fff;
    outline: 0px solid #000;
}

.navigation.pagination .nav-links .current {
    color: #000;
    background-color: #fff;
    outline: 0px solid #000;
}

.navigation.pagination .nav-links .dots {
    background: transparent;
    color: #a0a09a;
    outline: none;
}

/* BLOG - Single */
.single-datum {
    font-size: 0.9rem;
/*    font-style:italic; */
    margin: 10px 0px 10px 0px;
    
}

.single #spalten {
    grid-template-columns: 65% 35%;
}

.single h2 {
    font-size: 1.3rem;
    margin: 30px 0px 10px 0px;
}

.single-inhalt {
    padding: 20px 0px 20px 0px;
}

@media all and (max-width: 950px) {

    #burger {
        position:absolute;
        right:20px;
        top:40px;
        cursor:pointer;
        width:50px;
        height:auto;
        display: block;
    }

    .home #burger {
        color: #FFF;
    }

    .aktiv #burger {
        color: #000;
    }

    #schliessen {
        position:absolute;
        top:40px;
        right:15px;
        width:60px;
        height: auto;
        cursor:pointer;
        display: block;
        z-index:9999;
        color: #000;
    }

    #hauptnavi {
        position:fixed; 
        top:0;
        bottom:0;
        left:0; 
        right:0;	
        z-index:999;
        background-color: #FFF;
        padding-top: 150px;
        transform: translateX(-100%);
        transition:transform 0.5s;
    }

    #hauptnavi.aktiv {
        transform: translateX(0);
    }

    #hauptnavi ul {
        display: inline;
        background-color:transparent;
        margin-bottom: 20px;
    }

    #hauptnavi ul li {
        text-align: center;
        padding: 0;
        margin: 0px 0px 80px 0px;
    }

    #hauptnavi ul a {
    	font-family: "NotoSansMono-Bold" !important;
        font-size:2.5rem !important;
        color: #000 !important;
    }
    
    #hauptnavi a:hover, 
    #hauptnavi .current-menu-ancestor a:not(.sub-menu a),
    #hauptnavi .current-menu-item a {
	    color:#FFF !important;
    }


    #stoerer {
        padding: 40px;
    }

    #stoerer-titel {
        font-size: 2.0rem;
    }
    
    #zahlen {
        grid-template-columns: 1fr;
    }

    .kontakt {
        grid-template-columns: 1fr; /* eine Spalte */
        grid-template-rows: auto auto; /* Bild oben, Text unten */
    }

    #fuss-box {
        padding: 60px 20px 60px 20px;
    }

    #fuss {
        grid-template-columns: 1fr 1fr; /* 2 Spalten */
        grid-template-areas: 
            "links  rechts"
            "mitte  mitte"; /* Mitte darunter, über gesamte Breite */
        column-gap: 20px;
        row-gap: 20px; /* Abstand zwischen Reihen */
    }
    
    .inhalt h1 {
        font-size:2.0rem;
    }

    #spalte-links h1 {
        font-size: 2.0rem;
    }


    #projekte {
        grid-template-columns: 1fr; /* eine Spalte */
    }

    
    #spalten {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    }

    .single #spalten {
        grid-template-columns: 1fr;
    }

    
}



@media all and (max-width: 500px) {

	
	#logo-wort svg,
	.aktiv #logo-wort svg  {
		width: 350px;
	}


	#logo-wort-zusatz,
	.aktiv #logo-wort-zusatz {
		top: 60px;
	}

	
    #burger {
        top:25px;
    }

	
	#stoerer {
		right: 0;
		left: 0;
		padding: 40px;
	}

	#stoerer-titel {
		font-size: 2.5rem;
	}


	
}





/* ==================================================================== */
/* Ergaenzungen 2026-09 (Templates: Hero als h1/p, Leistungs-CTA, Footer-Adresse) */
/* ==================================================================== */

#stoerer-titel { margin: 0; }
#stoerer-text { margin: 10px 0 0 0; }

.leistung-cta { margin: -40px 0 30px 0; }

#fuss-adresse { font-style: normal; line-height: 1.6em; }
#fuss-adresse a { color: #FFF; }
#fuss-adresse a:hover { text-decoration: none; border-bottom: 3px dotted #FFF; }