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

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height    :     1.6;
    color   :     #2c3e50;
  background: #fafbfc;
}

.hauptnavi {
	background  :   #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  position: sticky;
  top: 0;
    z-index: 1000;
    padding: 1rem 0;
}

.navi-wrapper {
       max-width: 1400px;
	margin: 0 auto;
  padding: 0 2rem;
  display: flex;
	justify-content: space-between;
  align-items  :    center;

}

.marke-logo .site-logo {
 height: 48px;
	 width: auto;
}

.mobilmenu-toggle {

	    display: none;
	 background    :   none;
  border: none;
   cursor   :    pointer;
  padding: 8px;
     }

.burger-icon {
    width: 28px;
    height:     28px;
  stroke  :        #2c3e50;
	fill: none;
   stroke-width  :    2;
}

.navi-links {
    display: flex;
	list-style: none;
  gap   : 2.5rem;

}

.navi-links li a {
   text-decoration: none;
    color: #34495e;
   font-weight: 500;
    font-size: 1.05rem;
    transition: color 0.3s;
}


.navi-links li a:hover {
  color: #e67e22;
}

.hero-bereich {
 max-width: 1400px;
       margin: 0 auto;
                    padding: 5rem 2rem;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4rem;
               align-items :     center;
}

.hero-inhalt h1   {
  font-size: 3.2rem;
  color: #2c3e50;
  margin-bottom: 1.5rem;
   line-height: 1.2;
}

.hero-untertext {

  font-size    :     1.25rem;
    color: #5a6c7d;
	 margin-bottom: 2rem;


}

.primär-button {
   display: inline-block;
  background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
    color: white;
   padding: 1rem 2.5rem;
   text-decoration: none;
  border-radius: 8px;
   font-weight  :  600;
   transition: transform 0.3s, box-shadow 0.3s;
}

.primär-button:hover     {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(230, 126, 34, 0.3);
}

.hero-bild img


{
	  width: 100%;
    border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
	}

.über-uns-sektion {
	    background: white;
	 padding: 5rem 0;}

.container-bereich {
   max-width: 1400px;
  margin: 0 auto;
                    padding: 0 2rem;
}

.über-uns-sektion h2 {
    text-align: center;

   font-size: 2.8rem;

         color: #2c3e50;

  margin-bottom: 3.5rem;
}

.über-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
   gap: 2.5rem;
}

.über-karte {
        background: #f8f9fa;
   padding: 2.5rem;
    border-radius: 10px;
          text-align: center;
  transition: transform 0.3s;
     }

.über-karte:hover

{
  transform: translateY(-8px);
}

.karten-symbol {
   width: 64px;
   height: 64px;
    margin-bottom: 1.5rem;
   stroke: #e67e22;
   fill: none;
   stroke-width: 2;
  stroke-linecap: round;
   stroke-linejoin: round;
}

.über-karte h3	{
   font-size: 1.6rem;
   color: #2c3e50;
   margin-bottom: 1rem;
}

.über-karte p		{
	 color   :       #5a6c7d;
   line-height: 1.7;
}



.leistungen-überblick {
  padding     :   5rem 0;
  background: #fafbfc;
}

.leistungen-überblick h2  
  {
   text-align: center;
	 font-size: 2.8rem;
    color: #2c3e50;
   margin-bottom: 3.5rem;
}

.leistungs-grid {
  display  :    grid;
  grid-template-columns: repeat(2, 1fr);
	gap: 2.5rem;
} 

.leistungs-box {
	background   :     white;
    border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  transition: transform 0.3s;
}

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

.leistungs-box img {
   width: 100%;

	    height: 280px;

	   object-fit     : cover;
}

.box-inhalt {
	padding: 2rem; 

}

.box-inhalt h3 {
       font-size: 1.8rem; 
   color: #2c3e50; 
    margin-bottom: 1rem;
}

.box-inhalt p {
   color: #5a6c7d;
  line-height    :       1.7;
}

.cta-bereich {
	  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  padding: 5rem 2rem;
    text-align: center;
  color: white;



}

.cta-inhalt h2 {
    font-size: 3rem;
   margin-bottom: 1.5rem;


}

.cta-inhalt p {
  font-size: 1.3rem;
	   margin-bottom: 2.5rem;
	    max-width: 800px;
	   margin-left: auto;
	  margin-right  : auto;
}

.cta-knopf {
   display: inline-block;
  background: white;
    color: #3498db;
   padding: 1.2rem 3rem;
          text-decoration: none;
               border-radius: 8px;
    font-weight: 700;
   font-size: 1.1rem;
   transition: transform 0.3s, box-shadow 0.3s;
}

.cta-knopf:hover {

	  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);}

.prozess-sektion {
  padding: 5rem 0;

	 background: white;
}

.prozess-sektion h2 {
     text-align    :       center;
	font-size: 2.8rem;
    color: #2c3e50;
	 margin-bottom: 4rem;
}

.prozess-schritte {
    display: grid;

  grid-template-columns: repeat(4, 1fr);

    gap: 2rem;
}

.schritt-element {
  text-align   : center;
  padding:       2rem;
}

.schritt-nummer {
  background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
    color: white;
       width: 70px;
  height: 70px;
  border-radius : 50%;
  display   :        flex;
    align-items: center;
   justify-content :    center;
  font-size: 1.8rem;
  font-weight    :       bold;
   margin: 0 auto 1.5rem;
}

.schritt-element h3 {
  font-size: 1.5rem;
          margin-bottom: 1rem;
		 color: #2c3e50;
}

.schritt-element p {
         color: #5a6c7d;
   line-height   :   1.6;
}

.testimonials-bereich {
  padding: 5rem 0;
     background: #f8f9fa;
}

.testimonials-bereich h2 {
   color: #2c3e50;
   font-size  :   2.8rem;
  margin-bottom: 3.5rem;
  text-align: center;
}

.testimonial-grid {
   display  :grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.testimonial-karte    {
  background: white;
   padding: 2.5rem;
  border-radius    :      10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.testimonial-text {
    color: #34495e;
	font-style: italic;
  margin-bottom :  1.5rem;
	line-height: 1.8;
   font-size: 1.05rem;


}

.kunde-name {
  font-weight   :  600;
  color: #e67e22;
}


.kontakt-sektion {
      padding: 5rem 0;
       background: white;
}

.kontakt-sektion h2 {
   text-align: center;
   font-size: 2.8rem;
    color: #2c3e50;
   margin-bottom: 1.5rem;
}

.kontakt-intro		{
    text-align    :      center;
   font-size: 1.2rem;
    color :#5a6c7d;
  max-width  :  700px;
         margin: 0 auto 3rem;
}  

.kontakt-formular {
 max-width: 700px;
	 margin: 0 auto;
         background: #f8f9fa;
 padding   :3rem;
   border-radius: 12px;
}

.formular-gruppe {
     margin-bottom: 1.8rem;
}

.formular-gruppe label {

	                    color    :      #2c3e50;
   margin-bottom: 0.5rem;
               font-weight   :      600;
   display: block;

}

.formular-gruppe input,
.formular-gruppe select,
.formular-gruppe textarea {
	 width: 100%;
  padding: 0.9rem;
	 border: 2px solid #dce1e6;
   border-radius: 6px;
  font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.3s;
}  

.formular-gruppe input:focus,
.formular-gruppe select:focus,
.formular-gruppe textarea:focus {


    outline: none;
  border-color     :        #e67e22;

}

.formular-button {

  width   :    100%;
  background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
   color: white;
					padding: 1.2rem;
  border: none;
    border-radius: 6px;
   font-size   :  1.1rem;
   font-weight: 700;
	 cursor: pointer;
   transition: transform 0.3s; 
}

.formular-button:hover   {
  transform: translateY(-2px);
}

.haupt-footer {
  background:     #2c3e50;
   color: white;
	padding: 4rem 0 2rem;
} 

.footer-inhalt {
   max-width: 1400px;
   margin: 0 auto;
   padding: 0 2rem;
    display: grid;
          grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 3rem;
    margin-bottom: 3rem;
}


.footer-logo {
   height: 42px;
    width: auto;
    margin-bottom: 1.5rem;
  filter: brightness(0) invert(1);
}

.footer-beschreibung {
  color: #bdc3c7;
    line-height: 1.7; 

}  

.footer-spalte h4 {
   font-size: 1.3rem;
   margin-bottom: 1.2rem;
}

.footer-links {
   list-style: none;
}

.footer-links li {
         margin-bottom: 0.8rem;
}

.footer-links a	{
     color: #bdc3c7;
     text-decoration: none;
      transition: color 0.3s;
	}


.footer-links a:hover {
    color: #e67e22;
}

.telefon-footer {
    margin-top: 1rem;
    color: #bdc3c7;
}

.footer-bottom {
   max-width: 1400px;
    margin: 0 auto;
  padding: 2rem 2rem 0;
  border-top: 1px solid #34495e;
   text-align: center;
   color: #95a5a6;
}@media (max-width: 1024px) {
.hero-bereich {
grid-template-columns: 1fr;
gap: 3rem;
}

.über-grid {
grid-template-columns: 1fr;
}

.leistungs-grid {
grid-template-columns: 1fr;
}

.prozess-schritte {
grid-template-columns: repeat(2, 1fr);
}

.testimonial-grid {
grid-template-columns: 1fr;
}

.footer-inhalt {
grid-template-columns: 1fr 1fr;
}
}

@media (max-width: 768px) {
.mobilmenu-toggle {
display: block;
}

.navi-links {
position: fixed;
top: 80px;
left: -100%;
width: 100%;
background: white;
flex-direction: column;
padding: 2rem;
gap: 1.5rem;
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
transition: left 0.3s ease;
}

.navi-links.aktiv {
left: 0;
}

.hero-inhalt h1 {
font-size: 2.2rem;
}

.hero-untertext {
font-size: 1.1rem;
}

.über-uns-sektion h2,
.leistungen-überblick h2,
.prozess-sektion h2,
.testimonials-bereich h2,
.kontakt-sektion h2 {
font-size: 2rem;
}

.cta-inhalt h2 {
font-size: 2.2rem;
}

.prozess-schritte {
grid-template-columns: 1fr;
}

.footer-inhalt {
grid-template-columns: 1fr;
}
}.policySection {
    padding :  80px 2rem;
      background: #f8f9fa;
}

.policyContainer {
     max-width:   800px;
   margin: 0 auto;
    text-align: left;

}

.policyContainer h2 {
        font-size: 2.5rem;
  color     :#2c3e50;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.policyContainer p  {
	  color: #7f8c8d;
	margin-bottom: 1.5rem;
   line-height: 1.7;
   font-size    :1.1rem;
	}@media (max-width: 768px) {
    .policyContainer h2 {
        font-size: 2rem;
    }
    .policyContainer p {
        font-size: 1rem;
    }
    .policySection {
        padding: 60px 1rem;
    }
}.services-hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   padding: 5rem 2rem;
          text-align: center;
    color:   white;
}

.services-hero h1 {
    font-size: 3.5rem;
	margin-bottom: 1.5rem;
}

.hero-beschreibung {
  font-size: 1.3rem;
     max-width: 900px;
     margin: 0 auto;
                       line-height  :       1.8;
}

.service-detail-bereich {
	padding: 6rem 0;
}

.service-item {
  display: grid;
   grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
	margin-bottom :        6rem;
}

.service-item.reverse {
    direction: rtl;
}


.service-item.reverse > * {
   direction: ltr;
}  

.service-bild img {
  width: 100%;
    border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
}

.service-text h2 {
	 font-size: 2.5rem;
   color: #2c3e50;
    margin-bottom: 1.5rem;
}

.service-text > p {
	      font-size: 1.15rem;
   line-height: 1.8;
   margin-bottom  :    2rem;
    color: #5a6c7d;
     }

.service-features {
	margin-bottom: 2.5rem;
}

.feature-punkt {
     margin-bottom   :     1rem;
    gap: 1rem;
    align-items: center;
   display: flex;
}

.feature-icon {
  width: 24px;
   height: 24px;
   stroke: #27ae60;
  fill: none;
    stroke-width  :  2.5;
  flex-shrink: 0;
}

.feature-punkt span {
   color: #34495e;

  font-size  :   1.05rem;
}

.service-button {
      display: inline-block;
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
      color  :      white;
 padding :       1rem 2.5rem;
   text-decoration: none;
  border-radius    :     8px;
   font-weight: 600;
  transition: transform 0.3s, box-shadow 0.3s;
}

.service-button:hover   {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(52, 152, 219, 0.4);
}

.coaching-formate {
 background: #f8f9fa;
  padding: 6rem 0;



}

.coaching-formate h2  {
  text-align: center;
   font-size   :    2.8rem;
               color: #2c3e50;
    margin-bottom: 4rem;
}

.formate-grid {
    display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:     3rem; 
	
}

.format-karte {

	   background: white;
  padding: 3rem;
   border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
                    text-align: center;
     }

.format-icon {
  width: 64px;
   stroke: #9b59b6;
	height: 64px;
    stroke-width: 2;
   margin-bottom  :   1.5rem;
    fill: none;
	
}

.format-karte h3     {
    font-size: 1.8rem;
    color:  #2c3e50;
  margin-bottom: 1.2rem;
}

.format-karte > p {

	   color: #5a6c7d;
   line-height     :    1.7;
   margin-bottom: 2rem;
}

.format-liste {
   list-style: none;
               text-align: left;
}

.format-liste li {
    padding-left: 1.5rem;
  color: #34495e;
   margin-bottom: 0.8rem;
    position: relative;

}

.format-liste li::before {

  content: '';
  position: absolute;
    left: 0;
  top: 0.6rem;
  width   :    8px;
   height: 8px;
  background: #e67e22;
    border-radius: 50%;
	}

.warum-playful-services {
    padding: 6rem 0;
  background :     white;
}

.warum-playful-services h2


{
    text-align: center;
 font-size: 2.8rem;
  color: #2c3e50;
 margin-bottom: 4rem;


}  

.methode-grid {
   display: grid;
  grid-template-columns: repeat(2, 1fr);
	gap: 3rem;
}

.methode-box {
  background: #f8f9fa;
  padding: 2.5rem;
    border-radius: 10px;
  position     :       relative;
   padding-left: 5rem;
}

.methode-nummer {
   position: absolute;
         left: 2rem;
  top: 2rem;
  background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
  color: white;
		width   :   50px;
     height: 50px;
  border-radius: 8px;
	 display: flex;
   align-items: center;
   justify-content: center;
    font-size: 1.5rem;
         font-weight     :     bold;
}

.methode-box h3 
 {
   margin-bottom     :        1rem;
   color: #2c3e50;
   font-size: 1.6rem;
}



.methode-box p {
		 color: #5a6c7d;
    line-height: 1.7;}

.investment-bereich   {
  background  :      #2c3e50;
  padding: 5rem 2rem;
  text-align     :    center;
   color: white;
}

.investment-bereich h2 {

	  font-size: 2.8rem;
   margin-bottom: 2rem;
}

.investment-intro {
  font-size: 1.2rem;
  max-width    :   800px;
    margin: 0 auto 3rem;
    line-height: 1.8;
    color:   #ecf0f1;
}  

.investment-cta {
	  margin-top: 2.5rem;
     }

.investment-button {
    display: inline-block;
  background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
 color: white;
   padding: 1.2rem 3rem;
   text-decoration  :      none;
   border-radius: 8px;
        font-weight: 700;
   font-size: 1.15rem;
                    transition:      transform 0.3s, box-shadow 0.3s;
}

.investment-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(230, 126, 34, 0.4);
}

.thankyou-hauptbereich {
   align-items: center;
  min-height: 60vh;
   padding: 6rem 2rem;
     justify-content: center;
	 display: flex;
}

.thankyou-container
	{


   max-width: 900px;
  text-align: center;
     }



.success-icon-wrapper {

	    margin-bottom: 2rem;

}

.success-icon


{
  width: 100px;
  height: 100px;
	stroke: #27ae60;
	 fill   :  none;
    stroke-width: 2;
     animation: scaleIn 0.5s ease-out;
}@keyframes scaleIn {
from {
transform: scale(0);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}.thankyou-hauptbereich h1 {
  font-size: 3rem;
   color: #2c3e50;
    margin-bottom: 1.5rem;

}

.thankyou-haupttext {
   font-size: 1.3rem;
   color: #5a6c7d;
    line-height: 1.8;
       margin-bottom: 4rem;
}

.naechste-schritte {
               background: #f8f9fa;
          padding:3rem;
  border-radius: 12px;
                    margin-bottom: 3rem;
}

.naechste-schritte h2 {
     font-size: 2.2rem;
   color: #2c3e50;
        margin-bottom: 2.5rem;
}

.schritte-liste


{
      gap: 2rem; 
		 display: flex; 
	  text-align: left; 
	  flex-direction: column;

}

.schritt-item {
      display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.schritt-icon {

    flex-shrink: 0;
}

.schritt-icon img {
	   width: 48px;
   height: 48px;
    stroke: #3498db;
  fill: none;
   stroke-width: 2;


}

.schritt-inhalt h3 {
  font-size: 1.5rem;
    color: #2c3e50;
   margin-bottom: 0.5rem;
}

.schritt-inhalt p {
    color: #5a6c7d;
   line-height    :  1.7;
} 

.thankyou-actions {
  display: flex;
	gap: 1.5rem;
  justify-content: center;
   margin-bottom: 3rem;
    flex-wrap: wrap;
}

.primary-action-btn {


   display: inline-block;
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
   color: white;
    padding     :     1rem 2.5rem;
   text-decoration  :      none;
  border-radius: 8px;
               font-weight: 600;
    transition: transform 0.3s;
	}

.primary-action-btn:hover {
  transform: translateY(-2px);
}

.secondary-action-btn {
   display     :      inline-block;
 background: white;
   color    :   #3498db;
   padding: 1rem 2.5rem;
   text-decoration     :        none;
   border-radius: 8px;
    font-weight: 600;
   border: 2px solid #3498db;
	 transition: all 0.3s;
}

.secondary-action-btn:hover {
  background: #3498db;
     color: white;
}

.zusatz-info {
  background: white;
   padding     :  2.5rem;
  border-radius:  10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.zusatz-info h3 {
    font-size: 1.8rem;
  color  :      #2c3e50;
   margin-bottom: 1rem;
}

.zusatz-info p {
   color: #5a6c7d;
  line-height   :   1.7;
          margin-bottom: 0.5rem;
}

.kontakt-telefon {
   font-size: 1.2rem; 
	  font-weight:  600; 
	   margin-top: 1.5rem;
}

.kontakt-telefon a {
 color: #e67e22;
	text-decoration: none;
}

.weitere-ressourcen {
  padding: 6rem 0;
  background: #fafbfc;
}

.weitere-ressourcen h2   {
    text-align: center;
					 font-size: 2.5rem;
	    color: #2c3e50;
	  margin-bottom: 3.5rem;

}



.ressourcen-grid {
    display: grid;
  grid-template-columns: repeat(3, 1fr);
        gap: 3rem;
}

.ressource-karte {
	   background: white;

   border-radius: 12px;

	 overflow: hidden;

  box-shadow: 0 4px 15px rgba(0,0,0,0.08);

  transition: transform 0.3s;

}

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

.ressource-karte img {
      width: 100%;
  height: 220px;
   object-fit: cover;
	


}

.ressource-karte h3 {
  font-size: 1.6rem;
    color: #2c3e50;
  margin: 1.5rem 2rem 1rem;
}

.ressource-karte p {

	  color: #5a6c7d;
   line-height: 1.7;
  margin: 0 2rem 1.5rem;
     }


.ressource-link {
    display: inline-block;
  color: #3498db;
   text-decoration: none;
  font-weight: 600;
  margin: 0 2rem 2rem;
   transition    :      color 0.3s;
}

.ressource-link:hover


{
    color: #2980b9;
}@media (max-width: 1024px) {
.services-hero h1 {
font-size: 2.5rem;
}

.service-item {
grid-template-columns: 1fr;
gap: 2.5rem;
}

.service-item.reverse {
direction: ltr;
}

.formate-grid {
grid-template-columns: 1fr;
}

.methode-grid {
grid-template-columns: 1fr;
}

.ressourcen-grid {
grid-template-columns: 1fr;
}

.thankyou-actions {
flex-direction: column;
}
}

@media (max-width: 768px) {
.services-hero {
padding: 3rem 1.5rem;
}

.services-hero h1 {
font-size: 2rem;
}

.hero-beschreibung {
font-size: 1.1rem;
}

.service-text h2 {
font-size: 1.8rem;
}

.thankyou-hauptbereich h1 {
font-size: 2rem;
}

.thankyou-haupttext {
font-size: 1.1rem;
}

.schritte-liste {
gap: 1.5rem;
}

.schritt-item {
flex-direction: column;
align-items: center;
text-align: center;
}
}