.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

.content-3column-container {
	overflow:auto;
	width:960px;
	padding:0px;
}

.content-3column {
	width:300px;
	margin-right:30px;
	float:left;
	border-top:1px dotted orange;
	padding:20px 0px;
}

.content-2column-span {
	width:630px;
	float:left;
	margin-right:30px;
	padding:20px 0px;
	border-top:1px dotted orange;
}

.content-3column-span:first-child {
	border-top:1px dotted orange;
}

.content-3column-span {
	border-top: 1px dotted #aaa;
	width:960px;
	margin-right:0px;
	padding:20px 0px;
}

.projects-left {
	float: left; 
	margin-right: 30px; 
	width: 630px;
}

.projects-right {
	position: relative;
	float: left; 
	width: 300px;
	height: 150px;
	overflow: hidden;
}

.projects-right img {
	z-index: 0;
	width:300px;
}

.projects-right img.fadeout {
	position: absolute;
	bottom: 0px;
	left: 0px;
	z-index: 100;
}

.content-3column:last-child {
	margin-right:0px;
}

.content-2column-span:last-child {
	margin-right:0px;
}

.content-3column-container h3 {
	font-size: 20px;
	margin-bottom: 15px;
}

.content-3column-container p {
	font-size:16px;
	line-height: 22px;
	margin-bottom: 22px;
}

.content-3column-container p.shortSeparation {
	margin-bottom: 11px;
}

.content-3column-container p:last-child {
	margin-bottom: 0px;
}

.content-3column-container ul {
	margin: -11px 0px 22px 40px;
	padding:0;
	list-style: none;
}

.content-3column-container li {
	margin-bottom: 11px;
	padding-left: 0;
	text-indent: -20px;
}

.content-3column-container li:before {
	/* \FE0E erzwingt das Textzeichen; ohne zeigen iOS/Android hier ein farbiges Emoji */
	content: "\25b6\FE0E";
	font-variant-emoji: text;
	color: #ff8e01;
	margin-right: 10px;
	position: relative;
	bottom: 0px;
	font-size: 13px;
}

#slider #text p#technologies {
	margin:10px 0px 0px;
}

/* Videos-Seite: Kacheln im Raster 3 x 300px (wie .content-3column), erzeugt von tools/videos-update.py */
.video-grid {
	display: grid;
	grid-template-columns: repeat(3, 300px);
	column-gap: 30px;
	row-gap: 30px;
	border-top: 1px dotted orange;
	padding: 20px 0px;
}

.video img {
	display: block;
	width: 300px;
	height: auto;
}

.video-link {
	display: block;
	color: black;
	text-decoration: none;
}

.video-link h3 {
	margin: 10px 0px 5px;
	-webkit-transition: color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out;
}

.video-link:hover h3 {
	color: #FF8322;
}

.content-3column-container p.video-meta {
	font-size: 13px;
	color: #888;
	margin-bottom: 8px;
}

/* Link in der Einleitung der Videos-Seite: Textfarbe und unterstrichen, beim Darueberfahren orange */
#content-banner h2 a {
	color: inherit;
	text-decoration: underline;
	-webkit-transition: color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out;
}

#content-banner h2 a:hover {
	color: #FF8322;
}

/* Videos-Seite: Seitennavigation unter den Kacheln (neuere | Seite 1 · 2 · 3 | aeltere) */
.video-pages {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 20px;
	margin-top: 10px;
	padding: 20px 0px;
	border-top: 1px dotted orange;
	font-size: 16px;
	line-height: 22px;
}

.video-pages a {
	color: black;
	text-decoration: underline;
	-webkit-transition: color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out;
}

.video-pages a:hover {
	color: #FF8322;
}

.video-pages strong {
	color: #FF8322;
}