/* Einheitliche Kubio-Beitragskacheln auf allen Seiten.
   Klasse dd-beitragskacheln dem Abschnitt in Kubio zuweisen.
   Ersetzt die bisherigen Ergänzungen für Projektseite und Stimmen-Seite. */
html#kubio body .dd-beitragskacheln {
 --dd-blue:#1e4f91; --dd-accent:#a4d6d1; --dd-accent-hover:#94cbc6;
 --dd-accent-dark:#315f5c; --dd-text:#252b2a; --dd-muted:#66716e;
 --dd-soft:#f4f9f8; --dd-border:#dce8e6;
}
html#kubio body .dd-beitragskacheln {
	padding-top: 60px !important;
	padding-bottom: 80px !important;

	background: var(--dd-soft) !important;
}


/* ----------------------------------------------------------
   ÜBERSCHRIFT
   ---------------------------------------------------------- */

html#kubio body .dd-beitragskacheln h2.wp-block-kubio-heading__text {
	margin-top: 0 !important;
	margin-bottom: 1.6rem !important;

	font-family: Mulish, Helvetica, Arial, sans-serif !important;

	font-size: clamp(2rem, 3vw, 2.8rem) !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;

	color: var(--dd-blue) !important;

	text-align: left !important;
}


html#kubio body .dd-beitragskacheln h2.wp-block-kubio-heading__text::after {
	content: "";

	display: block;

	width: 65px;
	height: 6px;

	margin-top: 0.8rem;

	background: var(--dd-accent);

	border-radius: 999px;
}


/* ----------------------------------------------------------
   KUBIOS EIGENES RASTER BEHALTEN
   Desktop 3 / Tablet 2 / Mobil 1
   ---------------------------------------------------------- */

html#kubio body .dd-beitragskacheln
.wp-block-kubio-query-loop__inner {
	row-gap: 28px !important;
}


/* Jede Grid-Spalte */

html#kubio body .dd-beitragskacheln
.wp-block-kubio-query-loop-item__container {
	display: flex !important;
}


/* ----------------------------------------------------------
   EIGENTLICHE KARTE
   ---------------------------------------------------------- */

html#kubio body .dd-beitragskacheln
.wp-block-kubio-query-loop-item__inner {
	display: flex !important;
	flex-direction: column !important;

	width: 100% !important;
	height: 100% !important;

	padding: 0 !important;

	background: #ffffff !important;

	border: 1px solid var(--dd-border) !important;

	border-radius: 18px !important;

	box-shadow:
		0 8px 25px rgba(31, 65, 61, 0.07) !important;

	overflow: hidden !important;

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		border-color 0.25s ease;
}


html#kubio body .dd-beitragskacheln
.wp-block-kubio-query-loop-item__container:hover
.wp-block-kubio-query-loop-item__inner {
	transform: translateY(-5px);

	border-color: var(--dd-accent) !important;

	box-shadow:
		0 18px 38px rgba(31, 65, 61, 0.13) !important;
}


/* kompletter Karteninhalt */

html#kubio body .dd-beitragskacheln
.wp-block-kubio-query-loop-item__align {
	display: flex !important;
	flex-direction: column !important;

	width: 100% !important;
	height: 100% !important;
}


/* ==========================================================
   BEITRAGSBILD
   ========================================================== */

html#kubio body .dd-beitragskacheln
.wp-block-kubio-post-featured-image__container {
	display: block !important;

	width: 100% !important;
	height: auto !important;

	aspect-ratio: 16 / 9 !important;

	margin: 0 !important;

	background: #eaf2f1;

	overflow: hidden !important;
}


html#kubio body .dd-beitragskacheln
.wp-block-kubio-post-featured-image__image {
	display: block !important;

	width: 100% !important;
	height: 100% !important;

	object-fit: cover !important;
	object-position: center center;

	transition: transform 0.45s ease;
}


html#kubio body .dd-beitragskacheln
.wp-block-kubio-query-loop-item__container:hover
.wp-block-kubio-post-featured-image__image {
	transform: scale(1.035);
}


/* ==========================================================
   TEXTBEREICH DER KARTE
   ========================================================== */

/* Kubio-Row unter dem Bild füllt Resthöhe */

html#kubio body .dd-beitragskacheln
.wp-block-kubio-query-loop-item__align
> .wp-block-kubio-row__container {
	display: flex !important;

	flex: 1 1 auto;
}


/* Row / Column ebenfalls volle Höhe */

html#kubio body .dd-beitragskacheln
.wp-block-kubio-query-loop-item__align
> .wp-block-kubio-row__container
> .wp-block-kubio-row__inner {
	width: 100% !important;
	height: 100% !important;
}


html#kubio body .dd-beitragskacheln
.wp-block-kubio-query-loop-item__align
.wp-block-kubio-column__container {
	height: 100% !important;
}


/* Innenabstand */

html#kubio body .dd-beitragskacheln
.wp-block-kubio-query-loop-item__align
.wp-block-kubio-column__inner {
	height: 100% !important;

	padding: 25px !important;
}


/* Kategorien, Titel, Text, Button untereinander */

html#kubio body .dd-beitragskacheln
.wp-block-kubio-query-loop-item__align
.wp-block-kubio-column__align {
	display: flex !important;
	flex-direction: column !important;

	align-items: flex-start !important;

	width: 100%;
	height: 100%;

	text-align: left !important;
}


/* ==========================================================
   KATEGORIEN
   ========================================================== */

html#kubio body .dd-beitragskacheln
.wp-block-kubio-post-categories__container {
	margin-bottom: 0.8rem !important;
}


html#kubio body .dd-beitragskacheln
.wp-block-kubio-post-categories__tags {
	line-height: 1.2;
}


/* Trennstriche verschwinden */

html#kubio body .dd-beitragskacheln
.wp-block-kubio-post-categories__tags .separator {
	display: none !important;
}


/* Pills */

html#kubio body .dd-beitragskacheln
.wp-block-kubio-post-categories__tags a {
	display: inline-block;

	margin: 0 5px 6px 0 !important;

	padding: 6px 9px;

	background: var(--dd-accent);

	border-radius: 999px;

	color: #244b48 !important;

	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;

	text-decoration: none !important;

	transition:
		background 0.2s ease,
		transform 0.2s ease;
}


html#kubio body .dd-beitragskacheln
.wp-block-kubio-post-categories__tags a:hover {
	background: var(--dd-accent-hover);

	transform: translateY(-1px);
}


/* ==========================================================
   TITEL
   ========================================================== */

html#kubio body .dd-beitragskacheln
.wp-block-kubio-post-title__link {
	display: block;

	width: 100%;

	text-decoration: none !important;
}


html#kubio body .dd-beitragskacheln
.wp-block-kubio-post-title {
	display: -webkit-box;

	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;

	overflow: hidden;

	margin-top: 0 !important;
	margin-bottom: 1rem !important;

	min-height: calc(1.32em * 3);

	font-family: Mulish, Helvetica, Arial, sans-serif !important;

	font-size: 21px !important;
	font-weight: 700 !important;
	line-height: 1.32 !important;

	color: var(--dd-text) !important;
}


html#kubio body .dd-beitragskacheln
.wp-block-kubio-post-title__link:hover
.wp-block-kubio-post-title {
	color: var(--dd-accent-dark) !important;
}


/* ==========================================================
   AUTOR + DATUM
   Auf der Startseite unnötig
   ========================================================== */

html#kubio body .dd-beitragskacheln
.wp-block-kubio-post-meta {
	display: none !important;
}


/* ==========================================================
   TEASER
   ========================================================== */

html#kubio body .dd-beitragskacheln
.wp-block-kubio-post-excerpt {
	display: -webkit-box;

	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;

	overflow: hidden;

	flex: 1 1 auto;

	margin-top: 0 !important;
	margin-bottom: 1.4rem !important;

	font-size: 15.5px !important;
	line-height: 1.7 !important;

	color: var(--dd-muted) !important;
}


/* ==========================================================
   WEITERLESEN
   ========================================================== */

html#kubio body .dd-beitragskacheln
.wp-block-kubio-read-more-button__spacing {
	margin-top: auto !important;
}


html#kubio body .dd-beitragskacheln
.wp-block-kubio-read-more-button__link {
	display: inline-flex !important;

	align-items: center;
	gap: 5px;

	width: auto !important;

	padding: 0 !important;

	background: transparent !important;

	border: 0 !important;

	color: var(--dd-blue) !important;

	font-size: 14px !important;
	font-weight: 700 !important;

	letter-spacing: 0 !important;
	text-transform: none !important;

	text-decoration: none !important;

	transition:
		color 0.2s ease,
		transform 0.2s ease;
}


html#kubio body .dd-beitragskacheln
.wp-block-kubio-read-more-button__link:hover {
	color: var(--dd-accent-dark) !important;

	transform: translateX(3px);
}


html#kubio body .dd-beitragskacheln
.wp-block-kubio-read-more-button__icon {
	width: 17px !important;
	height: 17px !important;

	fill: currentColor !important;
}


/* ==========================================================
   TABLET
   Kubio selbst stellt auf zwei Spalten um
   ========================================================== */

@media (max-width: 950px) {

	html#kubio body .dd-beitragskacheln {
		padding-top: 60px !important;
		padding-bottom: 80px !important;
	}

}


/* ==========================================================
   SMARTPHONE
   Kubio selbst stellt auf eine Spalte um
   ========================================================== */

@media (max-width: 768px) {

	html#kubio body .dd-beitragskacheln {
		padding-top: 45px !important;
		padding-bottom: 60px !important;
	}


	html#kubio body .dd-beitragskacheln h2.wp-block-kubio-heading__text {
		font-size: 2rem !important;
		margin-bottom: 1.4rem !important;
	}

  html#kubio body .dd-beitragskacheln h2.wp-block-kubio-heading__text::after {
    width: 55px;
    height: 5px;
    margin-top: 0.7rem;
  }


	html#kubio body .dd-beitragskacheln
	.wp-block-kubio-query-loop-item__align
	.wp-block-kubio-column__inner {
		padding: 22px !important;
	}


	html#kubio body .dd-beitragskacheln
	.wp-block-kubio-post-title {
		display: block;

		min-height: 0;

		font-size: 20px !important;
	}


	html#kubio body .dd-beitragskacheln
	.wp-block-kubio-post-excerpt {
		display: block;
	}

}



html#kubio body .dd-beitragskacheln > .wp-block-kubio-section__inner { width:calc(100% - 40px) !important; max-width:1140px !important; margin-inline:auto !important; }
html#kubio body .dd-beitragskacheln a:focus-visible {outline:3px solid #1e4f91;outline-offset:4px;}
@media (hover:none), (pointer:coarse) {
html#kubio body .dd-beitragskacheln :is(.wp-block-kubio-query-loop-item__inner,.wp-block-kubio-post-featured-image__image,.wp-block-kubio-post-categories__tags a,.wp-block-kubio-read-more-button__link) {transform:none !important;}
}
@media (prefers-reduced-motion:reduce) {
html#kubio body .dd-beitragskacheln * {transition:none !important;transform:none !important;}
}


/* Nach der gemeinsamen Beitragskachel-CSS einfügen. */
html#kubio body .dd-beitragskacheln .dd-slider-track {
 display:flex !important; flex-wrap:nowrap !important; justify-content:flex-start !important;
 overflow-x:auto !important; scroll-snap-type:x mandatory; scroll-behavior:smooth;
 margin-inline:0 !important; width:100% !important; padding-block:10px 24px;
 scrollbar-width:thin; gap:0 !important; row-gap:0 !important;
}
html#kubio body .dd-beitragskacheln .dd-slider-track > .wp-block-kubio-query-loop-item__container {
 flex:0 0 33.333333% !important; width:33.333333% !important; max-width:33.333333% !important;
 min-width:0; box-sizing:border-box; padding-inline:12px !important; scroll-snap-align:start;
}
html#kubio body .dd-beitragskacheln .dd-slider-controls {
 display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; margin-top:16px;
}
html#kubio body .dd-beitragskacheln .dd-slider-controls button {
 display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px;
 margin:0; padding:10px 16px; border:1px solid #1e4f91; border-radius:8px;
 background:#fff; color:#1e4f91; font:600 16px/1.4 Mulish,Arial,sans-serif; cursor:pointer;
}
html#kubio body .dd-beitragskacheln .dd-slider-controls button:hover { background:#f2f6fb; }
html#kubio body .dd-beitragskacheln .dd-slider-controls button:focus-visible { outline:3px solid #1e4f91; outline-offset:3px; }
html#kubio body .dd-beitragskacheln .dd-slider-controls button:disabled { opacity:.45; cursor:default; }
@media(max-width:1023px){
 html#kubio body .dd-beitragskacheln .dd-slider-track > .wp-block-kubio-query-loop-item__container {flex-basis:50% !important;width:50% !important;max-width:50% !important;}
}
@media(max-width:767px){
 html#kubio body .dd-beitragskacheln .dd-slider-track > .wp-block-kubio-query-loop-item__container {flex-basis:100% !important;width:100% !important;max-width:100% !important;}
}
@media(prefers-reduced-motion:reduce){html#kubio body .dd-beitragskacheln .dd-slider-track {scroll-behavior:auto;}}