/*
 * Taminda Intensivpflege - Simple Responsive CSS
 * Diese Datei ergänzt das bestehende style.css
 * Fokus: Breiten auf 100% setzen und Mobile-Anpassungen
 */

/*--------------------------------------------------------------
# MOBILE (0-767px) - Columns untereinander
--------------------------------------------------------------*/

@media screen and (max-width: 767px) {
	/* WordPress Columns - volle Breite auf Mobile */
	#primary .wp-block-columns {
		flex-wrap: wrap !important;
		display: block !important;
	}
	
	#primary .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
		margin: 0 0 20px 0 !important;
		padding: 0 !important;
	}
	
	/* Bilder in Columns - 100% Breite */
	#primary .wp-block-column figure,
	#primary .wp-block-column .wp-block-image {
		margin: 0 0 20px 0 !important;
		width: 100% !important;
	}
	
	#primary .wp-block-column img {
		width: 100% !important;
		height: auto !important;
		display: block;
	}
}

/*--------------------------------------------------------------
# TABLET & DESKTOP (768px+) - Columns nebeneinander (Original)
--------------------------------------------------------------*/

@media screen and (min-width: 768px) {
	/* Auf Tablet/Desktop: Columns nebeneinander erzwingen */
	#primary .wp-block-columns,
	.lb-content .wp-block-columns {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 2em !important;
	}
	
	#primary .wp-block-column,
	.lb-content .wp-block-column {
		flex: 1 !important;
		min-width: 0 !important;
		flex-basis: calc(33.33% - 1.5em) !important;
		width: auto !important;
	}
	
	/* In Lightbox: Icon links, Text rechts */
	.lb-content .wp-block-column:first-child {
		flex-basis: 150px !important;
		flex-grow: 0 !important;
	}
	
	.lb-content .wp-block-column:last-child {
		flex: 1 !important;
	}
}

/*--------------------------------------------------------------
# MOBILE & TABLET (unter 1200px) - FRÜHERER BREAKPOINT
--------------------------------------------------------------*/

@media screen and (max-width: 1199px) {
	
	/* Basis-Anpassungen */
	html,
	body {
		overflow-x: hidden !important;
	}
	
	.inner {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 20px !important;
		padding-right: 20px !important;  /* Symmetrisch! */
	}
	
	/* Header komplett umbauen */
	#header {
		height: auto !important;
		padding: 20px 0 0 !important;  /* Kein Padding unten! */
		text-align: center;
		position: relative;
	}
	
	/* Logo kleiner auf Mobile */
	#header #logo,
	#masthead #logo {
		max-width: 280px !important;
		width: 100% !important;
		height: auto !important;
	}
	
	/* Slogan kompakter */
	#slogan {
		font-size: 14px !important;
		line-height: 1.4 !important;
		margin: 10px 0 !important;
		padding: 0 10px !important;
	}
	
	/* Header Contact kompakter */
	#headerContact {
		font-size: 15px !important;
		margin: 10px 0 !important;
		padding: 0 10px !important;
	}
	
	#headerContact div {
		margin: 5px 0 !important;
	}
	
	/* Pinker Menü-Balken statt Hamburger */
	.mobile-menu-toggle {
		display: block;
		position: relative !important;
		width: 100% !important;
		max-width: 100% !important;
		left: 0 !important;
		right: 0 !important;
		top: auto !important;
		margin: 0 !important;  /* Kein Margin! */
		padding: 15px 20px !important;
		background: #b01a81 !important;  /* Exakt dieses Pink! */
		border: none !important;
		border-radius: 0 !important;  /* Keine abgerundeten Ecken! */
		color: #fff !important;  /* Weißer Text */
		font-size: 18px !important;
		font-weight: 600;
		text-align: center;
		text-transform: uppercase;
		cursor: pointer;
		z-index: 100 !important;
		transition: background 0.3s ease;
		letter-spacing: 0.5px;
		box-shadow: none !important;
	}
	
	.mobile-menu-toggle::before {
		content: "☰  ";  /* Icon vor Text */
		font-size: 20px;
		margin-right: 8px;
	}
	
	.mobile-menu-toggle:hover {
		background: #8f1570 !important;  /* Etwas dunkler beim Hover */
	}
	
	/* Wenn Menü offen ist */
	.mobile-menu-toggle.active {
		background: #8f1570 !important;
	}
	
	/* Logo zentrieren */
	#masthead #logo {
		position: relative !important;
		bottom: auto !important;
		left: auto !important;
		margin: 0 auto 15px !important;
		display: block;
		text-align: center;
	}
	
	#masthead #logo img {
		max-width: 250px;
		margin: 0 auto;
	}
	
	/* Slogan zentrieren */
	#slogan {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		width: 100% !important;
		max-width: 100%;
		margin: 0 auto 15px !important;
		text-align: center;
		font-size: 14px;
	}
	
	/* Kontakt zentrieren */
	#headerContact {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		text-align: center;
		margin: 0 auto 15px !important;
	}
	
	/* Siegel verstecken auf Mobile */
	#seale {
		display: none !important;
	}
	
	/* Navigation umbauen */
	#site-navigation {
		height: auto !important;
		margin-top: 0 !important;  /* Kein Abstand! */
	}
	
	#site-navigation .inner {
		position: relative;
		padding: 0 !important;  /* Kein Padding! */
	}
	
	/* Menu KOMPLETT verstecken auf Mobile */
	#primary-menu {
		display: none !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		flex-direction: column !important;
	}
	
	/* Menu anzeigen wenn aktiv */
	#primary-menu.active {
		display: flex !important;
		flex-direction: column !important;
	}
	
	#primary-menu li {
		width: 100%;
		float: none !important;
		text-align: center;
		border-bottom: 1px solid rgba(255,255,255,0.1);
		margin: 0 !important;
	}
	
	#primary-menu a {
		display: block;
		padding: 15px 20px !important;
		line-height: 1.4 !important;
	}
	
	/* Submenu */
	#primary-menu ul.sub-menu {
		display: none !important;
		position: static !important;
		width: 100% !important;
		box-shadow: none !important;
		left: auto !important;
		float: none !important;
		background: rgba(235,226,223,0.95);
		padding: 0 !important;
		margin: 0 !important;
	}
	
	/* Submenu anzeigen bei Hover/Click */
	#primary-menu li.menu-item-has-children:hover > ul.sub-menu,
	#primary-menu li.menu-item-has-children.open > ul.sub-menu {
		display: block !important;
	}
	
	#primary-menu ul.sub-menu li {
		float: none !important;
		width: 100% !important;
		border: none !important;
	}
	
	#primary-menu ul.sub-menu a {
		width: 100% !important;
		padding: 12px 30px !important;
		font-size: 14px !important;
		background: rgba(235,226,223,0.95) !important;
	}
	
	/* Menu-Indikator entfernen */
	#primary-menu > li::before {
		display: none !important;
	}
	
	/* Header Image */
	#headerImage {
		height: 300px !important;
		background-size: cover !important;
		background-position: center !important;
	}
	
	/* Circles Section - 2x2 Grid auf Mobile */
	#brownUnderHeaderimage {
		height: auto !important;
		min-height: auto !important;
		padding: 20px 15px 20px !important;  /* Symmetrisches Padding! 20px oben, 20px unten */
		overflow: visible !important;
		position: relative;
	}
	
	#circles {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important; /* 2 Spalten auf Mobile */
		gap: 30px 20px !important;
		justify-items: center;
		max-width: 400px;
		margin: -80px auto 0 !important;
		padding: 0 15px;
		position: relative !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
	}
	
	.circleOuter {
		float: none !important;
		margin: 0 !important;
		width: 100% !important;
		max-width: 160px;
	}
	
	#brownUnderHeaderimage .circle,
	#brownUnderHeaderimage .circle-blue {
		width: 130px !important;
		height: 130px !important;
		background-size: 100px !important;
		margin: 0 auto !important;
	}
	
	.circleOuter .txt {
		font-size: 12px !important;
		line-height: 1.3 !important;
		min-height: 45px;
		padding-top: 10px;
	}
	
	/* Content - WENIGER ABSTAND */
	#primary {
		margin-top: 20px !important;  /* Weniger Abstand! (war 40px) */
		padding-top: 10px !important;
	}
	
	article {
		padding-top: 10px;
	}
	
	article h1 {
		font-size: 20px !important;
		line-height: 1.4 !important;
		margin-bottom: 20px !important;
	}
	
	.entry-content {
		font-size: 15px !important;
	}
	
	/* Testimonials */
	#testimonials {
		height: auto !important;
		margin-top: 70px !important;
		padding: 0px 5px 23px 5px !important;
	}
	
	.owl-stage .item blockquote {
		font-size: 18px !important;
		margin: 0 40px;
	}
	
	.owl-stage .item blockquote p {
		line-height: 24px;
	}
	
	/* Owl Carousel Navigation verstecken */
	.owl-prev,
	.owl-next {
		display: none !important;
	}
	
	/* Footer - KOMPLETT neu strukturiert */
	#colophon {
		padding: 30px 20px !important;
	}
	
	#colophon .inner {
		display: flex !important;
		flex-direction: column !important;
		gap: 30px;
	}
	
	#colophon .cols20 {
		width: 100% !important;
		height: auto !important;
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
		text-align: left !important;
		display: block !important;
	}
	
	#colophon .cols20 img {
		max-width: 150px;
		margin-bottom: 15px;
	}
	
	/* Footer Menüs */
	#colophon ul#footer-menu-1,
	#colophon ul#footer-menu-2 {
		padding: 0 !important;
		margin: 0 !important;
	}
	
	#colophon ul#footer-menu-1 li,
	#colophon ul#footer-menu-2 li {
		margin-bottom: 8px;
	}
	
	/* Forms */
	.wpcf7-form .col50 {
		width: 100% !important;
		float: none !important;
	}
	
	.wpcf7-form .col50 > .col50:nth-child(even) {
		padding-left: 0px !important;
	}
	
	.wpcf7-form textarea {
		margin-left: 0 !important;
		width: 100% !important;
	}
	
	.wpcf7-form .wpcf7-submit {
		width: 100% !important;
		margin-left: 0 !important;
		background-color: #b01a81 !important;
		color: #fff !important;
		text-align: center !important;
		border: none !important;
		padding: 15px !important;
		font-size: 16px !important;
		cursor: pointer !important;
	}
	
	/* Icon im Submit-Button verstecken */
	.submitOut i.fa-paper-plane {
		display: none !important;
	}

	
	/* Lightbox - 100% Breite auf Mobile, KEIN weißer Rahmen */
	.featherlight,
	.featherlight .featherlight-content,
	.featherlight-inner {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		box-shadow: none !important;
	}
	
	.featherlight-content {
		background: transparent !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	
	/* Close Button - außen rechts, nicht über Text */
	.featherlight-close-icon {
		position: fixed !important;
		top: 10px !important;
		right: 10px !important;
		width: 44px !important;
		height: 44px !important;
		background: rgba(255, 255, 255, 0.95) !important;
		color: #b01a81 !important;
		border-radius: 50% !important;
		font-size: 28px !important;
		line-height: 44px !important;
		text-align: center !important;
		border: 2px solid #b01a81 !important;
		z-index: 99999 !important;
		font-weight: bold !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}
	
	.lightbox-main {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;  /* Kein Padding! */
		background: #fff !important;
		margin: 0 !important;
	}
	
	.lb-content .wp-block-column {
		width: 100% !important;
		flex-basis: 100% !important;
	}
	
	/* Lightbox Icon - klein und zentriert */
	.lb-content .wp-block-image {
		text-align: center !important;
		margin: 0 auto 20px !important;
	}
	
	.lb-content .wp-block-image figure {
		margin: 0 auto !important;
		text-align: center !important;
	}
	
	.lb-content .wp-block-image img {
		max-width: 80px !important;  /* Viel kleiner! */
		width: 80px !important;
		height: auto !important;
		margin: 0 auto !important;
		display: block !important;
	}
	
	/* Lightbox Header - mehrzeilig, besser lesbar */
	.lb-header {
		padding: 15px 20px 10px 20px !important;
		min-height: auto !important;
	}
	
	.lb-header h1 {
		font-size: 18px !important;
		line-height: 1.3 !important;
		margin: 0 !important;
		white-space: normal !important;
		word-wrap: break-word !important;
	}
	
	/* Spezifisch für lb-76 - weniger Abstand oben */
	#lb-76 .lb-header h1 {
		padding-top: 10px !important;
	}
	
	/* Lightbox Image (Header-Bild) - KEIN Padding */
	.lb-image {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	
	.lb-image img {
		width: 100% !important;
		height: auto !important;
		display: block !important;
	}
	
	/* Lightbox Content - Icon links floaten */
	.lb-content {
		font-size: 15px !important;
		line-height: 1.5 !important;
		padding: 20px 20px 0 20px !important;  /* Symmetrisch! Links auch 20px */
		overflow: auto !important;
	}
	
	.lb-content p {
		margin: 0 0 15px 0 !important;
	}
	
	/* Lightbox Columns - Icon links, Text rechts */
	.lb-content .wp-block-columns {
		display: block !important;
		overflow: auto !important;
		margin: 0 !important;
	}
	
	.lb-content .wp-block-column {
		width: auto !important;
		flex-basis: auto !important;
		float: none !important;
		margin: 0 !important;
	}
	
	/* Erste Column (Icon) - links floaten */
	.lb-content .wp-block-column:first-child {
		float: left !important;
		width: 80px !important;  /* Kleiner! */
		margin: 0 15px 15px 0 !important;  /* Weniger Margin */
		padding: 0 !important;
	}
	
	.lb-content .wp-block-column:first-child .wp-block-image {
		margin: 0 !important;
	}
	
	.lb-content .wp-block-column:first-child img {
		max-width: 80px !important;  /* Icon kleiner */
		width: 80px !important;
	}
	
	/* Zweite Column (Text) - beginnt auf gleicher Höhe */
	.lb-content .wp-block-column:last-child {
		overflow: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	
	.lb-content .wp-block-column:last-child p:first-child {
		margin-top: 0 !important;
		padding-top: 0 !important;
	}
	
	
	
	.team a {
		display: block;
		width: 100%;
		float: left;
		margin-left: 0;
	}

	.team a IMG, .team .wp-block-image {
		width: 100% !important;
	}

	.team a:first-child {
		margin-left: 0;
	}

	.team .position {
		width: 100%;
		margin-top: -10px;
		background-color: #b01a81;
		color: #fff;
		padding: 15px;
		overflow: hidden;
	}
}

/*--------------------------------------------------------------
# TABLET (768px - 1199px) - 4 in einer Reihe, noch größer
--------------------------------------------------------------*/

@media screen and (min-width: 768px) and (max-width: 1199px) {
	
	/* Circles in einer Reihe, deutlich größer */
	#circles {
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 25px 20px !important;
		max-width: 100% !important;
		margin-top: -85px !important;
		padding: 0 20px;
	}
	
	.circleOuter {
		max-width: 150px;
	}
	
	#brownUnderHeaderimage .circle,
	#brownUnderHeaderimage .circle-blue {
		width: 135px !important;  /* Deutlich größer! */
		height: 135px !important;
		background-size: 105px !important;
	}
	
	.circleOuter .txt {
		font-size: 13px !important;
		line-height: 1.3 !important;
	}
	
	#brownUnderHeaderimage {
		padding: 20px 20px 20px !important;  /* Symmetrisch! */
	}
	
	/* 2 Spalten für Content */
	.wp-block-column {
		flex-basis: 48% !important;
		width: 48% !important;
	}
	
	/* Footer 2-spaltig */
	#colophon .inner {
		flex-direction: row !important;
		flex-wrap: wrap !important;
	}
	
	#colophon .cols20 {
		width: 48% !important;
	}
	
}

/*--------------------------------------------------------------
# LANDSCAPE MOBILE (Querformat) - 4 nebeneinander
--------------------------------------------------------------*/

@media screen and (max-width: 1199px) and (orientation: landscape) {
	
	/* Circles alle in einer Reihe im Landscape */
	#circles {
		grid-template-columns: repeat(4, 1fr) !important;  /* 4 Spalten! */
		gap: 15px 10px !important;
		max-width: 100% !important;
		margin-top: -70px !important;
		padding: 0 10px;
	}
	
	.circleOuter {
		max-width: 110px;
	}
	
	#brownUnderHeaderimage .circle,
	#brownUnderHeaderimage .circle-blue {
		width: 90px !important;  /* Etwas kleiner für Landscape */
		height: 90px !important;
		background-size: 70px !important;
	}
	
	.circleOuter .txt {
		font-size: 10px !important;
		line-height: 1.2 !important;
		min-height: 35px;
	}
	
	#brownUnderHeaderimage {
		padding: 20px 10px 20px !important;
	}
	
	/* Header etwas kompakter */
	#header {
		padding: 15px 0 0 !important;
	}
	
	#slogan {
		font-size: 13px !important;
		margin-bottom: 10px !important;
	}
	
	#headerContact {
		font-size: 13px !important;
		margin-bottom: 10px !important;
	}
}

/*--------------------------------------------------------------
# Desktop - Hamburger verstecken, Siegel anzeigen
--------------------------------------------------------------*/

@media screen and (min-width: 1200px) {
	.mobile-menu-toggle {
		display: none !important;
	}
	
	/* Siegel wieder anzeigen auf Desktop */
	#seale {
		display: block !important;
		position: absolute !important;
		left: 950px;
		top: 85px;
		z-index: 9999;
	}
	
	#seale img {
		max-width: none;
	}
}