@media (max-width: 767px) {
/* ------------------------------------- */
/* MOBIL ALLGEMEIN */
/* ------------------------------------- */
    body { font-size: 13px; padding: 0 }
	body p { font-size: 13px; padding: 0.75rem }
	body a { font-size: 13px; padding: 0.25rem }
    h1 { font-size: clamp(1.5rem, 5vw, 2rem); padding: 0.5rem }
    h2 { font-size: clamp(1.25rem, 4.5vw, 1.75rem); padding: 0.5rem }
    h3 { font-size: clamp(1rem, 4vw, 1.5rem); padding: 0.5rem }
    h4 { font-size: clamp(0.875rem, 3.5vw, 1.25rem); padding: 0.5rem }
    h5 { font-size: clamp(0.75rem, 3vw, 1rem); padding: 0.5rem }
    h6 { font-size: clamp(0.625rem, 2.5vw, 0.875rem); padding: 0.5rem }

    /* Boxen auf volle Breite */
    .header-container,
	.section,
	.content-box,
    .section-box-container,
	.content-box-2,
    .section-box-container-3,
    .content-box-3, 
    .section-standard,
    .section-rainbow,
	.footer-bottom,
	.footer-nav
	{
        flex: 1 1 98%;
		max-width: 98%;
		min-width: fit-content;
        margin: 0 auto;
		padding: 0.1875rem;
    }
	
	.main-nav {
		display: grid; /* Grid-Layout */
		grid-template-columns: repeat(4, 1fr); /* Vier gleich große Spalten */
		gap: 0.5rem; /* Abstand zwischen den Buttons */
		justify-content: center; /* Zentriert die Buttons */
		align-items: stretch; /* Alle Boxen gleich hoch */
		white-space: nowrap; /* Kein Zeilenumbruch im Text */
		padding: 0.625rem 0.625rem;
	}

	.nav-button {
		font-family: 'WorkSans-ExtraLight', sans-serif;
		text-align: center; /* Zentrierter Text */
		padding: 0.3125rem 0.3125rem;
		border-radius: 0.125rem;
		outline: 0.0125rem solid rgba(85, 98, 97, 0.2); /* Dezenter Rahmen */
		background: transparent;
		display: block;
		width: 100%; /* Volle Breite innerhalb der Grid-Zelle */
	}
	
    .section-chess,
    .footer-content {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.1875rem;
    }
	
	/* 🔹 Manueller Umbruch */
	.break {
		display: none; 
		flex-basis: 100%;
	}
		
    .image-container {
        flex-direction: column; /* Bilder untereinander anordnen */
    }

    .image-container img {
        width: 80%; /* Breite der Bilder auf kleineren Bildschirmen */
        max-width: none; /* Maximale Breite entfernen */
    }
	
	/* Listenstile */
	ul, ol {
		font-family: 'DreamingOutloudSans-Regular', sans-serif; /* Schriftart */
		list-style-position: inside; /* Bullet Points außerhalb */
		padding-left: 1rem; /* Einrückung */
		margin: 0.125rem 0; /* Abstand über und unter Listen */
		max-width: 90vw; /* Maximale Breite */
		box-sizing: border-box; /* Padding wird in der Breite berücksichtigt */
	}

	/* Verschachtelte Listen */
	ul ul, ol ol, ul ol, ol ul {
		padding-left: 1rem; /* Einrückung erhöhen */
		max-width: 90vw; /* Maximale Breite */
		box-sizing: border-box; /* Padding wird in der Breite berücksichtigt */
	}

	/* Listenelemente */
	li {
		max-width: 90vw; /* Maximale Breite */
		word-wrap: break-word; /* Lange Wörter umbrechen */
		text-align: justify; /* Blocksatz */
	}

	/* Verschachtelte Listenelemente */
	ul ul li, ol ol li, ul ol li, ol ul li {
		padding-left: 0; /* Zusätzliche Einrückung */
	}
	
	.chess-box.text {
		padding: 0.5rem; /* Innenabstand verdoppelt (vorher 1rem) */}
}

/* ------------------------------------- */
/* TABLET ALLGEMEIN */

@media (min-width: 768px) and (max-width: 1023px)  {
    /* Schriftgrößen für Tablets */
    body { font-size: 13px; padding: 0 }
	body p { font-size: 13px; padding: 0.25rem }
    h1 { font-size: clamp(2rem, 5vw, 2.5rem); padding: 0.25rem }
    h2 { font-size: clamp(1.75rem, 4.5vw, 2rem); padding: 0.25rem }
    h3 { font-size: clamp(1.5rem, 4vw, 1.75rem); padding: 0.25rem }
    h4 { font-size: clamp(1.25rem, 3.5vw, 1.5rem); padding: 0.25rem }
    h5 { font-size: clamp(1rem, 3vw, 1.25rem); padding: 0.25rem }
    h6 { font-size: clamp(0.875rem, 2.5vw, 1rem); padding: 0.25rem }
	
.main-nav {
    display: grid; /* Grid-Layout */
    grid-template-columns: repeat(4, 1fr); /* Vier gleich große Spalten */
    gap: 0.5rem; /* Abstand zwischen den Buttons */
    justify-content: center; /* Zentriert die Buttons */
    align-items: stretch; /* Alle Boxen gleich hoch */
    white-space: nowrap; /* Kein Zeilenumbruch im Text */
	padding: 0.625rem 0.625rem;
}

.nav-button {
    font-family: 'WorkSans-ExtraLight', sans-serif;
    text-align: center; /* Zentrierter Text */
    border-radius: 0.125rem;
    outline: 0.0125rem solid rgba(85, 98, 97, 0.2); /* Dezenter Rahmen */
    background: transparent;
    display: block;
    width: 100%; /* Volle Breite innerhalb der Grid-Zelle */
}

.nav-button p{
	padding: 0.625rem 0.625rem;
}
		
	.chess-box.text {
		padding: 0.5rem; /* Innenabstand verdoppelt (vorher 1rem) */}
	
	.content-box-3 {
		max-width: 98% !important;}
	
	.content-box.xxs { flex: 0 0 48%; max-width: 48%; } 
	
	/* Grid: Zwei Spalten */
/* Grid: Zwei Spalten */
	.section-chess{
		display: grid;
        grid-template-columns: 1fr;
        gap: 0.1875rem;
		max-width: 98%;
		min-width: fit-content;
    }
	
	.section-chess h1{
		font-size: 1.75rem;
    }
	
		.section-chess h5{
		font-size: 1rem;
    }
	
	.footer-content {
		display: grid;
		grid-template-columns: repeat(2, 1fr) !important; /* Zwei gleich breite Spalten */
		gap: 0.5rem; /* Mehr Abstand für Lesbarkeit */
		padding: 0.5rem; /* Gleichmäßiger Innenabstand */
		max-width: 98%; /* Maximale Breite */
		justify-items: center; /* Zentriert alle Grid-Items */
		text-align: center;
}		
	
	.tablet-break {
	  display: block /* Standardmäßig ausblenden */
	}
}

/* ------------------------------------- */
/* MOBIL + TABLET HOCHFORMAT */
/* ------------------------------------- */
@media (max-width: 767px),
       min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {	   
    .header-container,
	.main-nav,
	.section,
	.content-box,
    .section-box-container,
	.content-box-2,
    .section-box-container-3,
    .content-box-3, 
    .section-standard,
    .section-rainbow,
    .image-container,
	.footer-bottom,
	.footer-nav {
        flex-basis: 49%;
        max-width: 49%;
		padding: 0.1875rem;
        flex: 1 1 98%;
		max-width: 98%;
		min-width: fit-content;
        margin: 0 auto; /* Zentrieren */
		padding: 0.1875rem;
    }
	
    .section-chess,
    .footer-content {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.1875rem;
		max-width: 98%;
		min-width: fit-content;
    }
	
	.section-chess {
	}	

	.footer-box {
		width: 45%;	
	}
	
	.footer-box p, h5, a {
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto; /* Falls Trennstriche gewünscht sind */
		min-width: fit-content;
        margin: 0 auto !important; /* Zentrieren */
		padding: 0;
		text-align: center !important;
}

	.footer-box,
	.footer-bottom	{
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto; /* Falls Trennstriche gewünscht sind */
		min-width: fit-content;
        margin: 0 auto !important; /* Zentrieren */
		padding: 0.1875rem;
		margin-bottom: 0.75rem !important;
		text-align: center !important;
}
		
/* Copyright-Text */
	.footer-copyright {
		text-align: center !important;
	}

	/* Navigationslinks im Footer */
	.footer-nav {
		text-align: center !important;
	}

	.footer-nav a {
		text-align: center !important;
	}

/* ------------------------------------- */
/* TABLET QUERFORMAT */
/* ------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
    .flex-box,
	.content-box,
    .content-box.m { flex: 0 0 98%; max-width: 98% } 
    .content-box.xs { flex: 0 0 98%; max-width: 98% } 
    .content-box.s { flex: 0 0 98%; max-width: 98% } 
    .content-box.l { flex: 0 0 98%; max-width: 98% } 
    .content-box.xl { flex: 0 0 98%; max-width: 98% } /* Kann volle Breite bekommen */
}

	   }
	   
/* Media Query für große Bildschirme */
@media (max-width: 768px) {
  /* Umstellung auf einspaltiges Layout */
  .section-chess {
    grid-template-columns: 1fr;
  }
  
  /* Override der Desktop-Order-Regeln – so wird die natürliche DOM-Reihenfolge (1,2,1,2) wiederhergestellt */
  .section-chess .chess-box {
    order: 0 !important;
  }
  
  /* Optional: Bild-Box anpassen, falls die Höhe zu groß wird */
  .chess-box.image {
    height: auto;
  }
  
    /* Sicherstellen, dass Bilder responsiv bleiben */
  .chess-box.image img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}
	
/* Responsive: Bild und Text übereinander */
@media (max-width: 1023px) {
    .section-chess {
        grid-template-columns: 1fr; /* Eine Spalte */
    }

    .chess-box {
        order: unset; /* Reihenfolge zurücksetzen */
    }

    .chess-box.image {
        order: 1;
    }

    .chess-box.text {
        order: 2;
    }
}

@media (max-width: 768px) {
  /* Teammitglieder vertikal stapeln */
  .team-member {
	flex-flow: row wrap;
    flex-direction: column !important;
    align-items: center;
  }

  /* Bildspalte immer oben – 98% Breite, quadratisch */
  .team-member .pic-column {
    order: 1 !important;
    width: 98% !important;
    max-width: 98% !important;
    min-width: 98% !important;
    aspect-ratio: 1 / 1;  /* Erzwingt quadratisches Format */
    margin: 0 auto;
    padding: 3px !important;
  }

  /* Textspalte unter dem Bild – 98% Breite */
  .team-member .text-column {
    order: 2 !important;
    width: 98% !important;
    max-width: 98% !important;
    min-width: 98% !important;
    margin: 0 auto;
    padding: 3px !important;
  }

  /* Falls der Slider-Container im Textbereich ein zu großes Padding hat */
  .team-member .slider-container {
    padding: 3px !important;
  }
  
  .prev, .next {
    width: 1.8rem !important;       /* Pfeile kleiner */
    height: 1.8rem !important;      /* Pfeile kleiner */
    font-size: 0.75rem;                /* Schriftgröße anpassen (falls Text verwendet wird) */
    opacity: 0.6;                   /* Dezentere Darstellung */
    background-color: rgba(92, 127, 123, 0.6);      /* Hintergrundfarbe */
  }
    
    /* Pfeile weiter nach außen positionieren */
  .prev { left: -1rem !important; }
  .next { right: -1rem !important; }
}

	.text-container {
		width: 98% !important;
		max-width: 98% !important;
		margin: auto;
		padding: 3px !important;
	  }
}

/* Responsive Anpassungen */
@media (max-width: 600px) {
  #faq-form {
    padding: 0.75rem;
    margin: 0.75rem;
  }
  #faq-form h1 {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }
  #faq-form input[type="text"],
  #faq-form textarea,
  #faq-form input[type="submit"] {
    font-size: 0.9rem;
  }
}