/**
 * Startseite – „Unsere Kunden“ (#unsere-kunden), moderner Look passend zu den Leistungs-Kacheln:
 * Segment-Leiste statt loser Tab-Icons, Inhalt als graue Karte mit Bild-Banner (Pixel-Deko) oben,
 * darunter Text | Checkliste als Kärtchen + CTA.
 * Basis bleibt css/leistungen-tabs.css (wird auch auf /it-dienstleistungen-ulm/ genutzt) – daher alles unter #unsere-kunden.
 */

/* Icons der zusätzlichen Kundengruppen (Leiste + Mobile-Dropdown) */
body.page-home #unsere-kunden .services-tabs li[data-tab="gruppen"] .icon::before,
body.page-home #unsere-kunden .tabs-mobile-dropdown-icon[data-tab-icon="gruppen"]::before {
	background-image: url("/img/icons/unternehmensgruppen-white.svg");
}

body.page-home #unsere-kunden .services-tabs li[data-tab="eigene-it"] .icon::before,
body.page-home #unsere-kunden .tabs-mobile-dropdown-icon[data-tab-icon="eigene-it"]::before {
	background-image: url("/img/icons/server-white.svg");
}

@media (min-width: 800px) {
	/* Segment-Leiste */
	/* Breite der Leiste: ab 993px volle Stripe-Breite aus page-home-stripe-guides-desktop.css */
	body.page-home #unsere-kunden .services-tabs {
		gap: 6px;
		padding: 6px;
		box-sizing: border-box;
		border: 1px solid rgba(15, 23, 42, 0.06);
		border-radius: 8px;
		background: #f1f5f9;
		box-shadow: none;
	}

	body.page-home #unsere-kunden .services-tabs::after {
		display: none;
	}

	body.page-home #unsere-kunden .services-tabs li {
		flex: 1 1 0;
	}

	body.page-home #unsere-kunden .services-tabs li a {
		flex-direction: row;
		justify-content: center;
		gap: 12px;
		width: 100%;
		padding: 14px 18px;
		border-radius: 6px;
		transition: background-color 0.25s ease, box-shadow 0.25s ease;
	}

	body.page-home #unsere-kunden .services-tabs li a:hover {
		transform: none;
		background: rgba(255, 255, 255, 0.6);
	}

	body.page-home #unsere-kunden .services-tabs li.active a {
		background: #ffffff;
		box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
	}

	body.page-home #unsere-kunden .services-tabs li.active a::after {
		content: "";
		position: absolute;
		right: 18px;
		bottom: 0;
		left: 18px;
		height: 3px;
		border-radius: 3px 3px 0 0;
		background: linear-gradient(90deg, #08a1c7 0%, #0088a2 100%);
	}

	body.page-home #unsere-kunden .services-tabs li .icon {
		flex: none;
		width: 40px;
		height: 40px;
		margin: 0;
	}

	body.page-home #unsere-kunden .services-tabs li .icon::before {
		width: 20px;
		height: 20px;
	}

	body.page-home #unsere-kunden .services-tabs li a:hover .icon {
		transform: none;
	}

	body.page-home #unsere-kunden .services-tabs li .title {
		font-size: 15px;
		line-height: 1.3;
		text-align: left;
	}

	/* Inhalt als Karte */
	/* Karte schmaler als die Tab-Leiste, mittig */
	body.page-home #unsere-kunden .tab-contents {
		width: 100%;
		max-width: 1100px;
		margin-right: auto;
		margin-left: auto;
		padding: 0;
	}

	body.page-home #unsere-kunden .tab-content-desktop {
		position: relative;
		overflow: hidden;
		border: 1px solid rgba(15, 23, 42, 0.06);
		border-radius: 8px;
		/* wie .kb-baustein-hero__panel.kb-info (/ki-beratung/); das Foto liegt links darüber */
		background: #eef3f8 url("/img/Hintergrund_Partner_Logos.webp") right top / cover no-repeat;
	}

	/* Bild-Banner mit Pixel-Deko */
	body.page-home #unsere-kunden .tab-image-wrapper {
		position: relative;
		--banner-split: 100%;
		--p1: linear-gradient(rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.62));
		--p2: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4));
		--p3: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
		max-width: none;
		height: 210px;
		margin: 0;
		border-radius: 0;
		box-shadow: none;
		/* Transparent: rechts scheint der Karten-Hintergrund durch (Grau mit Partner-Muster, durchgehend bis unter den Text) */
		background: transparent;
	}

	body.page-home #unsere-kunden #startups {
		--tab-icon: url("/img/icons/startup-white.svg");
	}

	body.page-home #unsere-kunden #klein {
		--tab-icon: url("/img/icons/smallbusiness1-white.svg");
	}

	body.page-home #unsere-kunden #mittelstand {
		--tab-icon: url("/img/icons/mittelstand-white.svg");
	}

	body.page-home #unsere-kunden #oeffentlich {
		--tab-icon: url("/img/icons/government-white.svg");
	}

	body.page-home #unsere-kunden #gruppen {
		--tab-icon: url("/img/icons/unternehmensgruppen-white.svg");
	}

	body.page-home #unsere-kunden #eigene-it {
		--tab-icon: url("/img/icons/server-white.svg");
	}

	body.page-home #unsere-kunden .tab-image {
		width: var(--banner-split);
		height: 100%;
		object-fit: cover;
		object-position: center 35%;
	}

	body.page-home #unsere-kunden #startups .tab-image {
		object-position: 70% 30%;
	}

	body.page-home #unsere-kunden #eigene-it .tab-image {
		object-position: center 45%;
	}

	body.page-home #unsere-kunden .tab-image-wrapper::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: var(--banner-split);
		pointer-events: none;
		/* Pixel-Ecke unten rechts im Foto, darunter Abdunklung für die Überschrift */
		background:
			var(--p1) right 0 bottom 0 / 13px 13px no-repeat,
			var(--p1) right 14px bottom 0 / 13px 13px no-repeat,
			var(--p1) right 0 bottom 14px / 13px 13px no-repeat,
			var(--p2) right 28px bottom 0 / 13px 13px no-repeat,
			var(--p2) right 14px bottom 14px / 13px 13px no-repeat,
			var(--p2) right 0 bottom 28px / 13px 13px no-repeat,
			var(--p3) right 42px bottom 0 / 13px 13px no-repeat,
			var(--p3) right 28px bottom 14px / 13px 13px no-repeat,
			var(--p3) right 14px bottom 28px / 13px 13px no-repeat,
			var(--p3) right 0 bottom 42px / 13px 13px no-repeat,
			var(--p3) right 70px bottom 0 / 13px 13px no-repeat,
			var(--p3) right 0 bottom 70px / 13px 13px no-repeat,
			linear-gradient(90deg, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0.15) 55%, rgba(15, 23, 42, 0) 80%),
			linear-gradient(0deg, rgba(15, 23, 42, 0.5) 0%, rgba(15, 23, 42, 0) 65%);
	}

	/* Icon der Kundengruppe links unten unter dem Text */
	body.page-home #unsere-kunden .tab-content-desktop .row.clearfix > .half-block:first-child::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		display: block;
		width: 60px;
		height: 60px;
		border: 4px solid rgba(255, 255, 255, 0.75);
		border-radius: 50%;
		background: var(--tab-icon) center / 25px auto no-repeat, linear-gradient(135deg, #08a1c7 0%, #0088a2 100%);
		box-shadow: 0 10px 24px rgba(0, 136, 162, 0.22);
		box-sizing: border-box;
	}

	/* Text | Checkliste; Überschrift liegt unten links im Bild-Banner (absolut zur Karte) */
	body.page-home #unsere-kunden .tab-content .row {
		position: static;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: none;
		gap: 48px;
		align-items: start;
		padding: 32px 40px 36px 24px;
	}

	/* Spalten-Raster aus page-home-stripe-guides-desktop.css (display: contents, feste grid-column/-row) neutralisieren */
	body.page-home #unsere-kunden .tab-content-desktop .row.clearfix > .half-block:first-child {
		display: block;
	}

	body.page-home #unsere-kunden .tab-content-desktop .row.clearfix > .half-block:first-child p {
		grid-column: auto;
		grid-row: auto;
		justify-self: stretch;
		width: auto;
		max-width: none;
		margin-top: 0;
		padding: 0;
	}

	body.page-home #unsere-kunden .tab-content-desktop .row.clearfix > .half-block:first-child h3 {
		grid-column: auto;
		grid-row: auto;
		width: auto;
		max-width: none;
		padding: 0;
	}

	body.page-home #unsere-kunden .tab-content-desktop .row.clearfix > .half-block:last-child {
		grid-column: auto;
		grid-row: auto;
		align-items: stretch;
		margin-top: 0;
		padding: 0;
		border-left: 0;
	}

	body.page-home #unsere-kunden .tab-content-desktop .row.clearfix > .half-block:last-child .check-list {
		width: auto;
	}

	body.page-home #unsere-kunden .tab-content-desktop .row.clearfix > .half-block:last-child .check-list li {
		white-space: normal;
		font-size: 15px;
	}

	body.page-home #unsere-kunden .tab-content .row::before,
	body.page-home #unsere-kunden .tab-content .row::after {
		display: none;
	}

	body.page-home #unsere-kunden .tab-content .half-block {
		position: static;
		float: none;
		width: auto;
		margin: 0;
	}

	body.page-home #unsere-kunden .tab-content .half-block:last-child {
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding-left: 0;
		border-left: 0;
	}

	/* Überschrift hängt am linken Textblock → exakt bündig mit dem Absatz darunter; sitzt 26px über der Banner-Unterkante (32px = padding-top der .row) */
	/* Linke Spalte reicht bis zur Unterkante der Zeile; Icon sitzt dort fest unten links, Platz dafür über padding-bottom (60px Icon + 32px Abstand) */
	body.page-home #unsere-kunden .tab-content-desktop .row.clearfix > .half-block:first-child {
		position: relative;
		align-self: stretch;
		padding-bottom: 92px;
	}

	body.page-home #unsere-kunden .tab-content h3 {
		position: absolute !important;
		top: -58px;
		left: 0 !important;
		right: 0;
		justify-self: start !important;
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		text-align: left !important;
		color: #ffffff;
		font-size: 30px;
		line-height: 1.2;
		text-shadow: 0 2px 12px rgba(15, 23, 42, 0.35);
		transform: translateY(-100%);
	}

	body.page-home #unsere-kunden .tab-content p {
		margin: 0;
		color: #475569;
		font-size: 15.5px;
		line-height: 1.7;
	}

	body.page-home #unsere-kunden .check-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	body.page-home #unsere-kunden .check-list li {
		display: flex;
		align-items: center;
		min-height: 46px;
		padding: 8px 12px 8px 40px;
		border: 1px solid rgba(15, 23, 42, 0.06);
		border-radius: 5px;
		background: #ffffff;
		box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
		box-sizing: border-box;
		color: #0f172a;
		font-size: 15px;
		line-height: 1.35;
	}

	body.page-home #unsere-kunden .check-list li::before {
		left: 14px;
		width: 18px;
		height: 18px;
	}

	body.page-home #unsere-kunden .kunden-tab-cta {
		display: inline-flex;
		align-items: center;
		align-self: flex-start;
		gap: 6px;
		padding: 13px 22px;
		border-radius: 5px;
		background: #0088a2;
		box-shadow: 0 10px 22px rgba(0, 136, 162, 0.22);
		color: #ffffff;
		font-size: 15px;
		font-weight: 600;
		text-decoration: none;
		transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
	}

	body.page-home #unsere-kunden .kunden-tab-cta:hover {
		background: #007187;
		box-shadow: 0 14px 28px rgba(0, 136, 162, 0.3);
		transform: translateY(-2px);
	}
}

/* Große Screens: Kundengruppen als vertikale Leiste links, Karte rechts daneben.
   Spalten wie .case-studies-layout (25 % | 75 %), damit die Karte exakt so breit ist wie .case-study-content; Abstand über margin der Leiste */
@media (min-width: 1200px) {
	body.page-home #unsere-kunden > .container {
		display: grid;
		grid-template-columns: 25% 75%;
		column-gap: 0;
		row-gap: 60px;
		align-items: stretch;
	}

	body.page-home #unsere-kunden > .container > .head {
		grid-column: 1 / -1;
	}

	body.page-home #unsere-kunden .tabs-wrapper {
		display: flex;
		flex-direction: column;
		min-width: 0;
		margin: 0 24px 0 0;
	}

	body.page-home #unsere-kunden .tabs-instruction {
		display: none;
	}

	body.page-home #unsere-kunden .services-tabs {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		justify-content: flex-start;
		margin: 0;
	}

	body.page-home #unsere-kunden .services-tabs li {
		flex: none;
	}

	body.page-home #unsere-kunden .services-tabs li a {
		justify-content: flex-start;
		padding: 16px 18px;
	}

	body.page-home #unsere-kunden .services-tabs li.active a::after {
		top: 14px;
		right: auto;
		bottom: 14px;
		left: 0;
		width: 3px;
		height: auto;
		border-radius: 0 3px 3px 0;
		background: linear-gradient(180deg, #08a1c7 0%, #0088a2 100%);
	}

	body.page-home #unsere-kunden .tab-contents {
		max-width: none;
		min-height: 0;
		margin: 0;
	}
}

/* Waagerechte Leiste mit 6 Gruppen: 2 Reihen à 3 statt der 4 Stripe-Spalten */
@media (min-width: 993px) and (max-width: 1199px) {
	body.page-home #unsere-kunden .services-tabs {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) and (max-width: 1499px) {
	body.page-home #unsere-kunden .check-list {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 800px) and (max-width: 992px) {
	body.page-home #unsere-kunden .services-tabs li {
		flex: 0 1 calc(50% - 3px);
	}

	body.page-home #unsere-kunden .tab-contents {
		padding: 0 30px;
	}

	body.page-home #unsere-kunden .tab-image-wrapper {
		height: 190px;
	}

	body.page-home #unsere-kunden .tab-content h3 {
		top: -54px;
		right: 30%;
		font-size: 26px;
	}

	body.page-home #unsere-kunden .tab-content .row {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		padding: 28px 32px 32px 20px;
	}
}

/* Mobile: Karussell-Karten optisch angleichen */
@media (max-width: 799px) {
	body.page-home #unsere-kunden .tab-mobile-carousel-card {
		border: 1px solid rgba(15, 23, 42, 0.06);
		border-radius: 8px;
		background: #f3f6f9;
		box-shadow: none;
	}

	body.page-home #unsere-kunden .tab-mobile-carousel-card-top-border {
		border-radius: 8px 8px 0 0;
		background: linear-gradient(90deg, #08a1c7 0%, #0088a2 100%);
	}

	body.page-home #unsere-kunden .tab-mobile-carousel-card .check-list {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	body.page-home #unsere-kunden .tab-mobile-carousel-card .check-list li {
		padding: 10px 12px 10px 40px;
		border: 1px solid rgba(15, 23, 42, 0.06);
		border-radius: 5px;
		background: #ffffff;
	}

	body.page-home #unsere-kunden .tab-mobile-carousel-card .check-list li::before {
		left: 12px;
		width: 18px;
		height: 18px;
	}

	body.page-home #unsere-kunden .tab-mobile-carousel-button {
		border-radius: 5px;
	}

	body.page-home #unsere-kunden .tabs-mobile-dropdown-trigger {
		border-radius: 8px;
	}

	body.page-home #unsere-kunden .tabs-mobile-dropdown-trigger[aria-expanded="true"] {
		border-radius: 8px 8px 0 0;
	}

	body.page-home #unsere-kunden .tabs-mobile-dropdown-menu {
		border-radius: 0 0 8px 8px;
	}
}

/* Fallstudien darunter: gleiche Eckenrundung wie die Kundenkarte (.tab-content-desktop, 8px) */
body.page-home .case-studies-section .case-study-wrapper,
body.page-home .case-studies-section .case-study-card {
	border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
	body.page-home #unsere-kunden .services-tabs li a,
	body.page-home #unsere-kunden .kunden-tab-cta {
		transition: none;
	}

	body.page-home #unsere-kunden .kunden-tab-cta:hover {
		transform: none;
	}
}