/*
Theme Name: PerSoNa
Theme URI: https://www.kreativ-wolke.de
Author: Manuel Grasse
Author URI: https://www.kreativ-wolke.de
Description: PerSoNa HS-Mittweida
Version: 1.0
License: GPL v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

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

/* open-sans-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/open-sans-v40-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	   url('fonts/open-sans-v40-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/open-sans-v40-latin-300italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	   url('fonts/open-sans-v40-latin-300italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/open-sans-v40-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	   url('fonts/open-sans-v40-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/open-sans-v40-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	   url('fonts/open-sans-v40-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/open-sans-v40-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	   url('fonts/open-sans-v40-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/open-sans-v40-latin-500italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	   url('fonts/open-sans-v40-latin-500italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/open-sans-v40-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	   url('fonts/open-sans-v40-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/open-sans-v40-latin-600italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	   url('fonts/open-sans-v40-latin-600italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/open-sans-v40-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	   url('fonts/open-sans-v40-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/open-sans-v40-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	   url('fonts/open-sans-v40-latin-700italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/open-sans-v40-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	   url('fonts/open-sans-v40-latin-800.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 800;
  src: url('fonts/open-sans-v40-latin-800italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	   url('fonts/open-sans-v40-latin-800italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

html {
	font-size: 10px; /* 1rem = 10px, also 16px = 1.6rem */
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.6rem;
	line-height: 1.6;
	  text-shadow: 0 0 1px rgba(0, 0, 0, 0.01);
		  -webkit-font-smoothing: antialiased; /* Webkit Browsers (Chrome, Safari) */
		  -moz-osx-font-smoothing: grayscale; /* macOS Firefox */
		  text-rendering: optimizeLegibility; /* Bessere Buchstaben-Erkennung */
}


/* Responsive Header */
.header {
	padding: 1rem 2rem;
	background: #fff;
	border-bottom: 1px solid #dadada;
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 1000;
}
.header .row{
	
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.header .logo img {
	height: 7rem;
	width: auto;
	display: block;
}

.navbar {
	display: flex;
	align-items: center;
}

.nav-menu {
	list-style: none;
	display: flex;
	gap: 2rem;
}

.nav-menu li {
	position: relative;
}

.nav-menu li a {
	text-decoration: none;
	color: #333;
	font-size: 1.6rem;
	font-weight: 600;
	padding: 1rem;
}

.nav-menu li:hover > ul {
	display: block;
}

/* Dropdown Menu */
.nav-menu ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: white;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	min-width: 15rem;
	list-style: none;
}

.nav-menu ul li {
	width: 100%;
}

.nav-menu ul li a {
	display: block;
	padding: 1rem;
}

/* Burger Menu */
.burger {
	display: none;
	flex-direction: column;
	cursor: pointer;
}

.burger div {
	width: 3rem;
	height: 0.3rem;
	background: #333;
	margin: 0.3rem 0;
	transition: all 0.3s;
}
.burger.active div:nth-child(1) {
	transform: rotate(45deg) translate(6px, 6px);
}
.burger.active div:nth-child(2) {
	opacity: 0;
}
.burger.active div:nth-child(3) {
	transform: rotate(-45deg) translate(6px, -6px);
}

/* Row Container */
.row {
	max-width: 128rem;
	margin: 0 auto;
	padding: 2rem;
}

/* Sections */
.acf-section {
	padding: 8rem 2rem;
}

.acf-section.kopfbereich{
	padding: 2rem
}

.acf-section.white { background-color: #ffffff; }
.acf-section.gray { background-color: #F7F7F7; }
.acf-section.green { background-color: #00753D; color: #fff; }
.acf-section.blue { background-color: #1E4977; color: #fff; }
.acf-section.purple { background-color: #980E5C; color: #fff; }

/* Heading Container */
.heading-container {
	margin-bottom: 6rem;
}

.heading-container h2 {
	margin: 0;
	font-size: 3.2rem;
}

.heading-container p {
	margin-top: 0;
	margin-bottom: 2rem;
	font-size: 2rem;
	color: #555;
}
/* Squares Under Headings */
.squares-container {
	display: flex;
	gap: 1rem;
	margin-top: 1rem;
}

.square {
	width: 1.2rem;
	height: 1.2rem;
	background-color: #999;
}

/* Header Media */
.header-media {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.header-media img,
.header-media video {
	max-width: 100%;
	height: auto;
}

/* Columns */
.columns {
	display: flex;
	flex-wrap: wrap;
	gap: 5rem;
	justify-content: center;
}

.column {
	flex: 1;
	min-width: 30rem;
}

.column .header-media{
	margin-bottom: 2rem;
	
	align-items: flex-start;
	flex-direction: column;
}

.image-copyright{
	font-size: 12px;
	text-align: left;
	margin-top: 10px;
}
.column h3 {
	margin-top: 0;
}
 .button{
	
	margin-top: 4rem;
}
 .button a {
	display: inline-flex;
	color: #444;
	border-radius: 2.5rem;
	align-items: center;
	border: 0.1rem solid #444;
	padding: 0.6rem 2rem;
	text-decoration: none;
	transition: all 0.3s ease-in-out
}

 .button a svg {
	height: 1.8rem;
	width: 2.2rem;stroke: #444;
	margin-left: 1rem;
	transition: all 0.3s ease-in-out
}
.acf-section.green .button a,
.acf-section.blue .button a,
.acf-section.purple .button a{ border-color: #fff; color: #fff; }

.button a:hover svg{
	margin-left: 20px;
}
.acf-section.green  .button a svg,
.acf-section.blue   .button a svg,
.acf-section.purple  .button a svg{ stroke: #fff; }

 .button a:hover{ background: #444; color: #fff }
.button a:hover svg{ stroke: #fff}

.acf-section.green   .button a:hover,
.acf-section.blue   .button a:hover,
.acf-section.purple  .button a:hover{ background: #fff }

		
	
.acf-section.green  .button a:hover { color: #00753D}
.acf-section.blue   .button a:hover { color: #1E4977}
.acf-section.purple   .button a:hover { color: #980E5C}

.acf-section.green   .button a:hover svg{ stroke: #00753D}
.acf-section.blue  .button a:hover svg{ stroke: #1E4977}
.acf-section.purple  .button a:hover svg{ stroke: #980E5C}



/* Bild-Links */
.image-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 3rem;
}

.image-link {
	flex: 1 1 calc(33.333% - 2rem); /* 1/3 der Breite mit Abstand */
	text-align: center;
	background: white;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-link:hover {
	transform: translateY(-5px);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.image-link a {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: inherit;
	height: 100%;
}

.image-link img {
	width: 100%;
	height: auto;
	display: block;
}

.image-link p {
	margin-top: 1rem;
	font-size: 1.4rem;
	margin-bottom: 1rem;
}
.image-link p small{
	display: block;
}

/* Bild-Text (2-spaltig) */
.image-text-two-columns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4rem;
	margin-top: 4rem;
}

.image-text-two-columns .image-container {
	flex: 1;
	min-width: 30rem;
	text-align: center;
}

.image-text-two-columns .image-container img,
.image-text-two-columns .image-container video {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.image-text-two-columns .text-container {
	flex: 1;
	min-width: 30rem;
}

.image-text-two-columns .text-container h3 {
	margin-top: 0;
}

.image-text-two-columns .text-container p {
	font-size: 1.6rem;
}


/* Spalten Überschrift Links */
.spalten-ueberschrift-links {
	display: flex;
	flex-direction: row;
	gap: 4rem;
	align-items: flex-start;
}

.spalten-ueberschrift-links .heading-container {
	flex: 1;
	margin-top: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.spalten-ueberschrift-links .heading-container p{
	color: #fff
}
.spalten-ueberschrift-links .columns {
	flex: 2;
	display: flex;
	gap: 4rem;
}

.spalten-ueberschrift-links .column {
	flex: 1;
}

.spalten-ueberschrift-links .column h3 {
	font-weight: bold;
}

.spalten-ueberschrift-links .column p {
	font-size: 1.6rem;
}


.footer {
	background: #fff;
	color: #333;
	padding: 4rem 2rem;
	text-align: center;
	border-top: 1px solid #dadada;
}

.footer-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2rem;
	max-width: 1200px;
	margin: 0 auto;
	align-items: center;
}

.footer-about h3 {
	font-size: 1.3rem;
	
}
.footer-about small{
	display: block
}
	.footer-about{
		text-align: left
	}
.footer-menu {
	list-style: none;
	display: flex;
	gap: 1rem;
}

.footer-menu li a {
	text-decoration: none;
	color: #333;
	font-size: 1.4rem;
	padding: 0.5rem;
	display: block;
}

.footer-social a {
	color: white;
	font-size: 2rem;
	margin: 0 1rem;
	text-decoration: none;
}

/* Responsive Navigation */
@media screen and (max-width: 1024px) {
	.navbar {
		display: none;
		flex-direction: column;
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		background: white;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		padding: 2rem;
	}
	
	.navbar.active {
		display: flex;
	}
	
	.nav-menu {
		flex-direction: column;
		width: 100%;
		text-align: center;
		gap: 1.5rem;
	}
	
	.burger {
		display: flex;
	}
}


@media screen and (max-width: 768px) {
	.spalten-ueberschrift-links{
		flex-direction: column
	}
	.acf-section {
		padding: 3rem 2rem;
	}
	.image-link{
		flex: 1 1 100%;
	}
	.heading-container h2 {
		font-size: 2.4rem;
	}.spalten-ueberschrift-links .heading-container{
		margin-bottom: 0;
	}
}