/*
Theme Name: Kadence Child
Theme URI: https://www.liquidweb.com/software/kadence/
Template: kadence
Author: Kadence WP
Author URI: https://www.liquidweb.com/
Description: Kadence Theme is a lightweight yet full featured WordPress theme for creating beautiful fast loading and accessible websites, easier than ever. It features an easy to use drag and drop header and footer builder to build any type of header in minutes. It features a full library of gorgeous starter templates that are easy to modify with our intelligent global font and color controls. With extensive integration with the most popular 3rd party plugins, you can quickly build impressive ecommerce websites, course websites, business websites, and more.
Tags: translation-ready,accessibility-ready,two-columns,right-sidebar,left-sidebar,footer-widgets,blog,custom-logo,custom-background,custom-menu,rtl-language-support,editor-style,threaded-comments,custom-colors,featured-images,wide-blocks,full-width-template,theme-options,e-commerce
Version: 1.5.2.1788808639
Updated: 2026-09-07 21:17:19

*/

/* ==========================================================================
   Inhalt
   1  Header
   2  Projekte (Filterleiste, Übersicht, Detailansicht, Galerie)
   3  Grundlagen (Variablen, Abschnitte, Überzeile, Abschnittskopf, Buttons)
   4  Slider
   5  Zahlenleiste
   6  Über-uns-Teaser und Team-Bereich (.al-about)
   7  Abschluss-Bild (.al-cta) und Bildbühne (.al-stage)
   8  Liste, Kontakt
   9  Projektliste-Teaser
   10 Hilfsklassen für Kadence-Zeilenlayouts (al-zoom, al-cards, al-sm)
   11 Footer
   ========================================================================== */


/* ==========================================================================
   1  Header
   ========================================================================== */

.site-branding .site-title {
  margin: 0;
  font-family: var(--global-primary-nav-font-family);
}

.site-branding .site-description {
  margin: 0 !important;
  text-transform: uppercase;
}


@media screen and (min-width: 720px) and (max-width: 1024px) {
	.site-branding .vs-md-false,
	.site-branding .vs-sm-false {
		display: block !important;
	}
}

/* Social-Icons im Header ausblenden.
   Sauberer wäre, das Element im Customizer aus dem Header-Builder zu nehmen —
   dann entsteht das Markup gar nicht erst. */

#masthead .header-social-wrap {
	display: none;
}


/* ==========================================================================
   2  Projekte

   Layout von Übersicht und Detailansicht kommt von Kadence, identisch zu
   Blog und Blogbeitrag. Hier steht nur, was dazukommt.
   ========================================================================== */

/* Filterleiste über dem Raster (wird in functions.php ausgegeben) */

.al-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	margin: 0 0 2rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var( --global-palette7, #e6e8ea );
}

.al-filter__item {
	position: relative;
	padding: 0.2rem 0;
	color: var( --global-palette5, #7a8085 );
	font-size: 0.8125rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.2s ease;
}

.al-filter__item:hover,
.al-filter__item:focus-visible,
.al-filter__item.is-active {
	color: var( --global-palette3, #1d1f21 );
}

.al-filter__item.is-active::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1rem;
	left: 0;
	height: 1px;
	background: var( --global-palette3, #1d1f21 );
}

/* Karten der Projektübersicht */

.post-type-archive-projekte .post-thumbnail, .tax-projektart .post-thumbnail {
  margin-bottom: 16px;
}

.post-type-archive-projekte .loop-entry .entry-content-wrap, .tax-projektart .loop-entry .entry-content-wrap {
  padding: 0;
}

.post-type-archive-projekte .loop-entry .entry-header, .tax-projektart .loop-entry .entry-header {
  margin-bottom: 0;
}

.post-type-archive-projekte .loop-entry .entry-title, .tax-projektart .loop-entry .entry-title {
   font-size: 28px;
  line-height: 1.2;
  hyphens: auto;
}
.post-type-archive-projekte .loop-entry .entry-summary, .tax-projektart .loop-entry .entry-summary {
  margin-top:0;
}
.post-type-archive-projekte .loop-entry .entry-summary p, .post-type-archive-projekte .loop-entry .entry-header .entry-meta {
  margin: 0;
}

/* Ort, Jahr und Projektart in der Detailansicht (functions.php) */

.al-projekt-meta {
	margin: 0 !important;
	color: var( --global-palette5, #7a8085 );
	font-size: 0.8125rem;
	letter-spacing: 0.09em;
}
.al-projekt-meta--last {
	margin-bottom: 1.5rem !important;
}

.al-projekt-art a {
	color: var( --global-palette5, #7a8085 );
	text-decoration: none;
	transition: color 0.2s ease;
}

.al-projekt-art a:hover,
.al-projekt-art a:focus-visible {
	color: var( --global-palette3, #1d1f21 );
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* Projektgalerie in der Detailansicht

   Vier Spalten, quadratische Vorschaubilder. Die Lightbox zeigt davon
   unberührt das Originalbild im Originalformat – der Zuschnitt passiert
   nur hier in der Anzeige, nicht an der Datei. */

.single-projekte .entry-content .wp-block-gallery.has-nested-images {
	--wp--style--unstable-gallery-gap: 0.75rem;
	gap: 0.75rem;
}

.single-projekte .entry-content .wp-block-gallery.has-nested-images figure.wp-block-image {
	flex-grow: 0;
	align-self: flex-start;
	margin: 0;
}

.single-projekte .entry-content .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image {
	flex-basis: calc( 25% - 0.5625rem );
	width: calc( 25% - 0.5625rem );
	max-width: calc( 25% - 0.5625rem );
}

.single-projekte .entry-content .wp-block-gallery.has-nested-images figure.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
}

/* Vergroessern-Symbol fest in die Ecke des Quadrats setzen. Die Lightbox
   rechnet seine Lage sonst fuer ein unbeschnittenes Bild aus
   (functions.php, al_projekt_galerie_lightbox_original). */
.single-projekte .entry-content .wp-block-gallery.has-nested-images figure.wp-block-image .lightbox-trigger {
	top: 16px !important;
	right: 16px !important;
}

/* Lightbox-Hintergrund: halbtransparentes Weiss, Seite dahinter unscharf.
   Die Farbe setzt WordPress inline (#fff), daher !important. */
.wp-lightbox-overlay .scrim {
	background-color: rgba( 255, 255, 255, 0.8 ) !important;
	-webkit-backdrop-filter: blur( 1.5rem );
	backdrop-filter: blur( 1rem );
}

@media ( max-width: 767px ) {

	.single-projekte .entry-content .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image {
		flex-basis: calc( 50% - 0.375rem );
		width: calc( 50% - 0.375rem );
		max-width: calc( 50% - 0.375rem );
	}
}


/* ==========================================================================
   3  Grundlagen
   ========================================================================== */

:root {
	--al-edge: clamp( 1.25rem, 5vw, 4rem );
	--al-space: clamp( 4.5rem, 9vw, 8rem );
	--al-ink: var( --global-palette3, #1b211a );
	--al-muted: var( --global-palette5, #646464 );
	--al-soft: var( --global-palette7, #f5f6f8 );
	--al-line: rgba( 27, 33, 26, 0.14 );
	--al-ease: cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

.entry-content > .al-hero,
.entry-content > .al-section,
.entry-content > .al-cta,
.entry-content > .al-stage {
	margin-top: 0;
	margin-bottom: 0;
}

/*
 * Kadence legt in jeder Gruppe einen Innencontainer an. Bei Slider und den
 * zweispaltigen Gruppen wird er durchlässig gemacht, damit die eigentlichen
 * Blöcke die Raster-Elemente sind.
 */
.al-hero > .wp-block-group__inner-container,
.al-head > .wp-block-group__inner-container,
.al-about > .wp-block-group__inner-container,
.al-contact > .wp-block-group__inner-container {
	display: contents;
}

/* Abschnitt: volle Breite mit Abstand oben und unten.
   Breite und Randabstand des Inhalts regelt .al-wrap, nicht Kadence. */

.al-section {
	padding-block: var( --al-space );
}

.al-section > .wp-block-group__inner-container {
	max-width: none;
	margin: 0;
	padding: 0;
}

.al-section--soft {
	background: var( --al-soft );
}

.al-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: var( --global-content-width, 1290px );
	margin-inline: auto;
	padding-inline: var( --al-edge );
}

/* Kleine Überzeile */

.al-eyebrow {
	margin: 0 0 1rem;
margin: 0 0 8px !important;
	color: var( --al-muted );
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* Abschnittskopf: links Überzeile und Überschrift, rechts der Einleitungstext */

.al-head {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: 1.5rem clamp( 2rem, 6vw, 6rem );
	align-items: end;
	margin-bottom: clamp( 2.5rem, 5vw, 4rem );
}

.al-head h2,
.al-head p {
	margin-top: 0;
	margin-bottom: 0;
}

.al-head .al-eyebrow {
	margin-bottom: 1rem;
}

.al-head h2,
.al-about__text h2 {
	font-size: clamp( 2rem, 3.6vw, 3.1rem );
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.al-head p:not( .al-eyebrow ) {
	max-width: 32rem;
	color: var( --al-muted );
	font-size: 1.0625rem;
	line-height: 1.65;
}

/* Schaltflächen: Klasse "al-btn-dark" bzw. "al-btn-light" am Button */

.al-btn-dark .wp-block-button__link,
.al-btn-light .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.75rem;
	border: 1px solid;
	border-radius: 0;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.al-btn-dark .wp-block-button__link::after,
.al-btn-light .wp-block-button__link::after {
	content: "\2192";
	transition: transform 0.25s var( --al-ease );
}

.al-btn-dark .wp-block-button__link:hover::after,
.al-btn-dark .wp-block-button__link:focus-visible::after,
.al-btn-light .wp-block-button__link:hover::after,
.al-btn-light .wp-block-button__link:focus-visible::after {
	transform: translateX( 0.3rem );
}

.al-btn-dark .wp-block-button__link {
	border-color: var( --al-ink );
	background: var( --al-ink );
	color: #fff;
}

.al-btn-dark .wp-block-button__link:hover,
.al-btn-dark .wp-block-button__link:focus-visible {
	background: transparent;
	color: var( --al-ink );
}

.al-btn-light .wp-block-button__link {
	border-color: #fff;
	background: #fff;
	color: var( --al-ink );
}

.al-btn-light .wp-block-button__link:hover,
.al-btn-light .wp-block-button__link:focus-visible {
	background: transparent;
	color: #fff;
}


/* ==========================================================================
   4  Slider
   Gruppe mit Klasse "al-hero", jede Folie ein Cover-Block mit "al-slide".
   Steuerung und Fortschrittsbalken fügt assets/al-hero.js ein.
   ========================================================================== */

.al-hero {
	position: relative;
	height: clamp( 540px, 88vh, 960px );
	overflow: hidden;
	background: var( --al-ink );
}

.al-hero .wp-block-cover.al-slide {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	height: 100%;
	min-height: 0 !important;
	margin: 0;
	padding: 0 var( --al-edge ) clamp( 6rem, 13vh, 8.5rem );
	align-items: flex-end;
	justify-content: flex-start;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1.4s var( --al-ease ), visibility 0s linear 1.4s;
}

.al-hero:not( .al-hero--js ) .al-slide:first-of-type,
.al-hero--js .al-slide.is-active {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	transition: opacity 1.4s var( --al-ease ), visibility 0s;
}

.al-slide .wp-block-cover__image-background {
	transform: scale( 1.08 );
	transition: transform 9s linear;
}

.al-hero:not( .al-hero--js ) .al-slide:first-of-type .wp-block-cover__image-background,
.al-slide.is-active .wp-block-cover__image-background {
	transform: scale( 1 );
}

/* Verlauf von unten, damit der Text auf jedem Foto lesbar bleibt */
.al-slide .wp-block-cover__background {
	opacity: 1 !important;
	background: linear-gradient(
		180deg,
		rgba( 10, 13, 10, 0.2 ) 0%,
		rgba( 10, 13, 10, 0 ) 28%,
		rgba( 10, 13, 10, 0.3 ) 58%,
		rgba( 10, 13, 10, 0.8 ) 100%
	) !important;
}

.al-slide .wp-block-cover__inner-container {
	width: 100%;
	max-width: var( --global-content-width, 1290px );
	margin-inline: auto;
	color: #fff;
}

.al-slide .wp-block-cover__inner-container > * {
	max-width: 46rem;
	margin-left: 0;
}

.al-hero--js .al-slide .wp-block-cover__inner-container > * {
	opacity: 0;
	transform: translateY( 1.25rem );
	transition: opacity 0.9s var( --al-ease ), transform 0.9s var( --al-ease );
}

.al-hero--js .al-slide.is-active .wp-block-cover__inner-container > * {
	opacity: 1;
	transform: none;
}

.al-hero--js .al-slide.is-active .wp-block-cover__inner-container > :nth-child( 1 ) { transition-delay: 0.35s; }
.al-hero--js .al-slide.is-active .wp-block-cover__inner-container > :nth-child( 2 ) { transition-delay: 0.5s; }
.al-hero--js .al-slide.is-active .wp-block-cover__inner-container > :nth-child( 3 ) { transition-delay: 0.65s; }
.al-hero--js .al-slide.is-active .wp-block-cover__inner-container > :nth-child( 4 ) { transition-delay: 0.8s; }

.al-slide .al-slide-title {
	margin: 0 0 1.25rem;
	color: #fff;
	font-size: clamp( 2.4rem, 5.6vw, 4.75rem );
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -0.02em;
}

.al-slide .al-slide-text {
	max-width: 34rem;
	margin: 0 0 2.25rem;
	color: rgba( 255, 255, 255, 0.88 );
	font-size: clamp( 1.05rem, 1.4vw, 1.25rem );
	line-height: 1.55;
}

.al-hero__controls {
	position: absolute;
	z-index: 3;
	right: var( --al-edge );
	bottom: clamp( 2rem, 5vh, 3rem );
	display: flex;
	align-items: center;
	gap: 1.25rem;
	color: #fff;
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	font-variant-numeric: tabular-nums;
}

.al-hero .al-hero__btn {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 1px solid rgba( 255, 255, 255, 0.45 );
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: #fff;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.al-hero .al-hero__btn:hover,
.al-hero .al-hero__btn:focus-visible {
	border-color: #fff;
	background: #fff;
	color: var( --al-ink );
}

.al-hero__sep {
	margin: 0 0.5rem;
	opacity: 0.5;
}

.al-hero__progress {
	position: absolute;
	z-index: 3;
	right: 0;
	bottom: 0;
	left: 0;
	height: 3px;
	background: rgba( 255, 255, 255, 0.18 );
}

.al-hero__progress span {
	display: block;
	height: 100%;
	background: #fff;
	transform: scaleX( 0 );
	transform-origin: left center;
}

.al-hero__progress span.is-running {
	animation: al-hero-progress 7s linear forwards;
}

.al-hero:hover .al-hero__progress span,
.al-hero:focus-within .al-hero__progress span {
	animation-play-state: paused;
}

.al-hero--static .al-hero__progress {
	display: none;
}

@keyframes al-hero-progress {
	to {
		transform: scaleX( 1 );
	}
}

@media ( max-width: 767px ) {

	.al-hero {
		height: clamp( 520px, 84vh, 760px );
	}

	.al-hero .wp-block-cover.al-slide {
		padding-bottom: 7rem;
	}

	.al-hero__controls {
		right: auto;
		bottom: 1.75rem;
		left: var( --al-edge );
	}
}


/* ==========================================================================
   5  Zahlenleiste
   Abschnitt "al-section al-section--facts", darin ein Kadence-Zeilenlayout
   "al-facts-row" mit Spalten "al-fact". Die Zahl ist eine Kadence-Überschrift,
   die Beschriftung ein Absatz mit "al-fact__label".
   ========================================================================== */

.al-section--facts {
	padding-block: clamp( 2.5rem, 5vw, 4rem );
	border-bottom: 1px solid var( --al-line );
}

/* Trennstrich links an jeder Spalte */
.al-fact {
	padding-left: 1.5rem;
	border-left: 1px solid var( --al-line );
}

.al-facts-row .wp-block-kadence-column.al-fact {
	margin: 0;
}

.al-fact p {
	margin: 0;
}

.al-fact .al-fact__label {
	margin-top: 0.75rem;
	color: var( --al-muted );
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}


/* ==========================================================================
   6  Über-uns-Teaser (Startseite) und Team-Bereich (Über uns)
   Gruppe "al-about": links Bildkomposition "al-about__media" mit Hauptbild
   "al-about__main" und kleinem Bild "al-about__inset", rechts "al-about__text".
   "al-about--reverse" tauscht die Seiten.
   ========================================================================== */

.al-about {
	display: grid;
	grid-template-columns: minmax( 0, 7fr ) minmax( 0, 5fr );
	gap: clamp( 2.5rem, 6vw, 6rem );
	align-items: center;
}

.al-about--reverse {
	grid-template-columns: minmax( 0, 5fr ) minmax( 0, 7fr );
}

.al-about--reverse .al-about__media {
	order: 2;
}

.al-about .al-about__media,
.al-about .al-about__text {
	margin-top: 0;
	margin-bottom: 0;
}

.al-about__media {
	position: relative;
	padding: 0 14% 16% 0;
}

.al-about__media .wp-block-image {
	margin: 0;
}

.al-about__main img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.al-about__inset {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 38%;
	border: 10px solid var( --al-soft );
}

.al-about__inset img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.al-about__text h2,
.al-about__text p {
	margin-top: 0;
}

.al-about__text h2 {
	margin-bottom: 1.5rem;
}

.al-about__text p:not( .al-eyebrow ) {
	color: var( --al-muted );
	font-size: 1.0625rem;
	line-height: 1.7;
}

.al-about__text .al-small {
	font-size: 0.95rem;
}

.al-about__text .wp-block-buttons {
	margin-top: 2rem;
}


/* ==========================================================================
   7  Abschluss-Bild (.al-cta) und Bildbühne oben auf Unterseiten (.al-stage)
   Beides Cover-Blöcke.
   ========================================================================== */

.wp-block-cover.al-cta {
	min-height: 0 !important;
	margin: 0;
	padding: clamp( 5rem, 12vw, 10rem ) var( --al-edge );
}

.al-cta .wp-block-cover__background {
	opacity: 0.62 !important;
	background: var( --al-ink ) !important;
}

.al-cta .wp-block-cover__inner-container {
	max-width: 44rem;
	margin-inline: auto;
	color: #fff;
	text-align: center;
}

.al-cta .wp-block-cover__inner-container > * {
	margin-top: 0;
}

.al-cta h2 {
	margin-bottom: 1rem;
	color: #fff;
	font-size: clamp( 2.1rem, 4.2vw, 3.5rem );
	line-height: 1.08;
	letter-spacing: -0.01em;
}

.al-cta p {
	margin-bottom: 2.25rem;
	color: rgba( 255, 255, 255, 0.86 );
	font-size: 1.125rem;
}

.al-cta .wp-block-buttons {
	justify-content: center;
}

.wp-block-cover.al-stage {
	min-height: clamp( 380px, 58vh, 640px ) !important;
	margin: 0;
	padding: 0 var( --al-edge ) clamp( 3rem, 7vw, 5rem );
	align-items: flex-end;
}

.al-stage .wp-block-cover__background {
	opacity: 1 !important;
	background: linear-gradient(
		180deg,
		rgba( 10, 13, 10, 0.25 ) 0%,
		rgba( 10, 13, 10, 0 ) 35%,
		rgba( 10, 13, 10, 0.72 ) 100%
	) !important;
}

.al-stage .wp-block-cover__inner-container {
	width: 100%;
	max-width: var( --global-content-width, 1290px );
	margin-inline: auto;
	color: #fff;
}

.al-stage .wp-block-cover__inner-container > * {
	max-width: 46rem;
	margin-left: 0;
}

.al-stage .al-eyebrow {
	margin-bottom: 1.25rem;
	color: rgba( 255, 255, 255, 0.82 );
}

.al-stage .al-eyebrow::before {
	content: "";
	display: inline-block;
	width: 2.5rem;
	height: 1px;
	margin-right: 0.9rem;
	background: currentColor;
	vertical-align: middle;
}

.al-stage h1 {
	margin: 0 0 1rem;
	color: #fff;
	font-size: clamp( 2.3rem, 5vw, 4rem );
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.al-stage p:not( .al-eyebrow ) {
	margin: 0;
	color: rgba( 255, 255, 255, 0.88 );
	font-size: clamp( 1.05rem, 1.4vw, 1.2rem );
	line-height: 1.55;
}


/* ==========================================================================
   8  Liste mit Trennlinien (.al-list) und Kontaktseite (.al-contact)
   ========================================================================== */

.al-list {
	margin: 1.5rem 0 1.75rem;
	padding: 0;
	border-top: 1px solid var( --al-line );
	list-style: none;
}

.al-list li {
	margin: 0;
	padding: 0.85rem 0;
	border-bottom: 1px solid var( --al-line );
	color: var( --al-ink );
}

.al-contact {
	display: grid;
	grid-template-columns: minmax( 0, 5fr ) minmax( 0, 7fr );
	gap: clamp( 2.5rem, 6vw, 6rem );
	align-items: start;
}

.al-contact .al-contact__info,
.al-contact .al-contact__form {
	margin: 0;
}

.al-contact h2 {
	margin: 0 0 1.75rem;
	font-size: clamp( 1.8rem, 3vw, 2.5rem );
	line-height: 1.15;
}

.al-contact__info p {
	margin: 0 0 1.5rem;
	line-height: 1.65;
}

.al-contact__info .al-eyebrow {
	margin-bottom: 0.35rem;
}

.al-contact__info a {
	color: var( --al-ink );
}

.al-contact__info .al-small {
	padding-top: 1.5rem;
	border-top: 1px solid var( --al-line );
	color: var( --al-muted );
	font-size: 0.875rem;
}

.al-contact__form {
	padding: clamp( 1.5rem, 3vw, 3rem );
	background: var( --al-soft );
}

.al-contact__form .kb-field {
	border-radius: 0;
	background: #fff;
}

.al-contact__form .kb-forms-submit {
	padding: 1rem 1.75rem;
	border-radius: 0;
	background: var( --al-ink );
	color: #fff;
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.al-contact__form .kb-forms-submit:hover,
.al-contact__form .kb-forms-submit:focus-visible {
	background: var( --global-palette4, #464646 );
}

.al-contact__form .al-small {
	margin: 1.25rem 0 0;
	color: var( --al-muted );
	font-size: 0.875rem;
}

.al-contact__form .al-small a {
	color: inherit;
}


/* ==========================================================================
   9  Projektliste-Teaser unter dem Projektraster (wird in functions.php
      ausgegeben, Bild-ID dort)
   ========================================================================== */

.al-listteaser {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem 3rem;
	margin: clamp( 3rem, 6vw, 5rem ) 0 0;
	padding: clamp( 1.75rem, 4vw, 3rem );
	background: var( --al-soft );
}

.al-listteaser__text {
	flex: 1 1 28rem;
	max-width: 40rem;
}

.al-listteaser__text > * {
	margin-top: 0;
}

.al-listteaser h2 {
	margin-bottom: 0.75rem;
	font-size: clamp( 1.6rem, 2.6vw, 2.2rem );
	line-height: 1.15;
}

.al-listteaser__text p:last-child {
	margin-bottom: 0;
	color: var( --al-muted );
	line-height: 1.6;
}


/* ==========================================================================
   10 Hilfsklassen für Kadence-Zeilenlayouts
   Im Block unter Erweitert → Zusätzliche CSS-Klasse(n) eintragen.

   al-zoom   Zoom beim Überfahren auf Bilder und Cover-Blöcke
   al-cards  kleinerer Fließtext in den Kacheln (nur normale Absätze)
   al-sm     engere Abstände (Kadence md → sm), auch an einzelnen Spalten
   ========================================================================== */

.al-zoom .wp-block-image,
.al-zoom .wp-block-cover {
	overflow: hidden;
}

.al-zoom .wp-block-image img,
.al-zoom .wp-block-cover__image-background {
	transition: transform 1.2s var( --al-ease );
}

/* Auslöser ist die ganze Spalte, damit es auch mit Overlay-Link greift */
.al-zoom .wp-block-kadence-column:hover .wp-block-image img,
.al-zoom .wp-block-kadence-column:hover .wp-block-cover__image-background,
.al-zoom .wp-block-kadence-column:focus-within .wp-block-image img,
.al-zoom .wp-block-kadence-column:focus-within .wp-block-cover__image-background {
	transform: scale( 1.05 );
}

.al-cards p.wp-block-paragraph {
	font-size: 0.975rem;
	line-height: 1.6;
}

.al-sm {
	--global-md-spacing: var( --global-sm-spacing );
}

/* Zeilenabstand, wenn Kadence-Spalten auf Tablet und Handy umbrechen.
   Kadence setzt den Wert beim Speichern im Editor auf 0 zurück, deshalb
   steht er hier. Standard 40px, pro Zeilenlayout über --al-row-gap
   änderbar. */
@media ( max-width: 1024px ) {

	.al-wrap .kb-row-layout-wrap > .kt-row-column-wrap {
		row-gap: var( --al-row-gap, 40px );
	}

	.al-facts-row {
		--al-row-gap: 28px;
	}

	/* Projektarten auf der Startseite: gleicher Abstand wie zwischen den
	   beiden Zeilenlayouts */
	.kb-row-layout-id1036_d49b04-00,
	.kb-row-layout-id1036_d49b05-00 {
		--al-row-gap: 16px;
	}
}

/* Overlay-Link der Kadence-Spalte: sichtbarer Fokus für Tastaturnutzer */
.kb-section-link-overlay:focus-visible {
	outline: 2px solid var( --al-ink );
	outline-offset: 3px;
}


/* ==========================================================================
   11 Footer
   ========================================================================== */

/* Obere Footer-Zeile ist im Footer-Builder leer, zur Sicherheit ausblenden */
.site-top-footer-wrap {
	display: none;
}

.site-bottom-footer-inner-wrap {
	padding-bottom: 20px;
}


/* ==========================================================================
   Responsiv und reduzierte Bewegung
   ========================================================================== */

@media ( max-width: 1024px ) {

	.al-head,
	.al-about,
	.al-about--reverse,
	.al-contact {
		grid-template-columns: minmax( 0, 1fr );
	}

	.al-about--reverse .al-about__media {
		order: 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.al-filter__item,
	.al-hero .wp-block-cover.al-slide,
	.al-slide .wp-block-cover__image-background,
	.al-hero--js .al-slide .wp-block-cover__inner-container > *,
	.al-zoom .wp-block-image img,
	.al-zoom .wp-block-cover__image-background,
	.al-btn-dark .wp-block-button__link::after,
	.al-btn-light .wp-block-button__link::after {
		transition: none !important;
	}

	.al-slide .wp-block-cover__image-background {
		transform: none !important;
	}
}


.more-link-wrap {
  margin-top: 0;
}
a.post-more-link {
  font-weight: normal;
text-transform: none;
	font-weight: 300;
}
a.post-more-link .kadence-svg-iconset.svg-baseline svg {

}

.content-area {
  margin-top: 3rem;
}
.entry-hero-container-inner .entry-header {
  min-height: unset !important;
}
.entry-header .entry-title {
  padding-top: 3rem;
}


@media screen and (max-width: 719px) {
  .vs-sm-false {
    display: contents !important;
  }
}