/**
 * Archiv- und Suchergebnisseiten.
 *
 * Die alte Fassung reihte die Beitraege in voller Fensterbreite
 * untereinander: zehn Reportagen ergaben ueber sechs Bildschirmhoehen,
 * ohne dass man je zwei nebeneinander vergleichen konnte. Jetzt stehen
 * sie als Raster, das Bild fuehrt, Titel und Anriss stehen darunter im
 * Ruhigen statt im Bild.
 */

.da-archiv{
	width:100%;
	padding-bottom:70px;
}

/* ---------- Vollflaechiger Grund ----------
   Das Motiv der Kategorie liegt weich gezeichnet hinter der ganzen
   Seite und bleibt beim Scrollen stehen. Darauf schweben die Kacheln.
   Zwei feste Ebenen statt eines Elternhintergrunds: nur so laesst sich
   die Unschaerfe auftragen, ohne die Schrift mitzunehmen. */
.da-archiv{
	position:relative;
	z-index:0;
	margin-top:0;
}

/* Der Kopf bleibt unangetastet: er soll auf Archivseiten genauso
   aussehen wie auf Seiten und Beitraegen. Frueher standen hier eigene
   Regeln fuer Hintergrund und Abstaende. Sie machten die Leiste
   deckender und das Logo flacher, dadurch endete der Menuepunkt
   17px ueber der Kopfunterkante und die Aufklappmenues ragten in den
   Kopf hinein.

   Astra setzt dem Inhalt Abstand nach oben, auf breiten Schirmen 76px
   als Aussenabstand, auf schmalen 69px als Innenabstand. Der Archivtitel
   steht in einer eigenen Flaeche und bringt seinen Abstand selbst mit,
   deshalb hier beides weg. */
#primary{
	margin-top:0 !important;
	padding-top:0 !important;
}
.da-archiv__grund,
.da-archiv__schleier{
	position:fixed;
	inset:0;
	pointer-events:none;
}
.da-archiv__grund{
	background-position:center center;
	background-size:cover;
	background-repeat:no-repeat;
	/* leicht vergroessert, damit die weiche Kante der Unschaerfe
	   nirgends als heller Saum am Fensterrand auftaucht */
	transform:scale(1.12);
	/* Die kleine Bildfassung wird ohnehin hochgezogen, ein leichter
	   Weichzeichner glaettet nur noch die Treppen. Ein starker Wert
	   auf einer festen Ebene laesst Chrome bei jedem Scrollen die
	   ganze Flaeche neu rastern, das flackert. */
	filter:blur(10px) saturate(1.15);
	z-index:-2;
}
.da-archiv__schleier{
	/* nur so viel Schleier, dass die Schrift auf den Kacheln sicher
	   steht. Das Motiv soll erkennbar bleiben, nicht ausgebleicht. */
	background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.50));
	z-index:-1;
}

/* ---------- Kopf ---------- */
.da-archiv__kopf{
	position:relative;
	margin:0;
	padding:34px 20px 8px;
	text-align:center;
}
.da-archiv__glas{
	max-width:760px;
	margin:0 auto;
	padding:34px 30px 30px;
	background:rgba(255,255,255,.68);
	backdrop-filter:blur(12px) saturate(140%);
	-webkit-backdrop-filter:blur(12px) saturate(140%);
	border:1px solid rgba(255,255,255,.7);
	border-radius:5px;
	box-shadow:0 10px 34px rgba(0,0,0,.08);
}
.da-archiv__titel{
	font-size:clamp(32px, 4.4vw, 48px);
	line-height:1.12;
	color:var(--ast-global-color-2, #484848);
	margin:0;
	text-wrap:balance;
}
.da-archiv__titel span{font-style:normal;}
.da-archiv__text{
	margin:16px auto 0;
	max-width:600px;
	font-size:17px;
	line-height:1.7;
	color:var(--ast-global-color-2, #484848);
}
.da-archiv__text p{margin:0;}
.da-archiv__anzahl{
	margin:18px 0 0;
	font-size:13px;
	letter-spacing:2px;
	text-transform:uppercase;
	color:var(--ast-global-color-3, #6a6a6a);
}
@media (prefers-reduced-transparency:reduce){
	.da-archiv__glas{
		background:#ffffff;
		backdrop-filter:none;
		-webkit-backdrop-filter:none;
		border-color:#e5e1d8;
	}
	.da-archiv__schleier{background:rgba(255,255,255,.86);}
}
@media (prefers-contrast:more){
	.da-archiv__glas{
		background:#ffffff;
		border:1px solid var(--ast-global-color-2, #484848);
	}
	.da-archiv__schleier{background:rgba(255,255,255,.9);}
}

/* ---------- Raster ---------- */
.da-archiv__liste{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:44px 36px;
	max-width:1160px;
	margin:56px auto 0;
	padding:0 20px;
}

/* ---------- Eintrag ---------- */
.da-eintrag,
.da-eintrag.ast-article-post,
.da-eintrag.ast-archive-post,
.da-eintrag.ast-grid-common-col{
	width:auto;
	margin:0;
	padding:0;
	border:0;
	background:none;
	box-shadow:none;
	float:none;
	max-width:none;
}
.da-eintrag__link{
	display:flex;
	flex-direction:column;
	height:100%;
	border-radius:3px;
	overflow:hidden;
	box-shadow:0 8px 26px rgba(0,0,0,.10);
	text-decoration:none;
	color:inherit;
}
.da-eintrag__bild{
	position:relative;
	overflow:hidden;
	border-radius:3px 3px 0 0;
	background:#f4f2ee;
	aspect-ratio:3 / 2;
}
.da-eintrag__bild img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform 600ms cubic-bezier(.2,.7,.3,1);
}
.da-eintrag__link:hover .da-eintrag__bild img,
.da-eintrag__link:focus-visible .da-eintrag__bild img{transform:scale(1.04);}

.da-eintrag__text{
	padding:18px 18px 20px;
	background:rgba(255,255,255,.88);
	display:flex;
	flex-direction:column;
	flex:1;
}
.da-eintrag__rubrik{
	margin:0 0 8px;
	font-size:12px;
	letter-spacing:2px;
	text-transform:uppercase;
	color:var(--ast-global-color-3, #6a6a6a);
}
.da-eintrag__titel{
	margin:0 0 10px;
	font-size:23px;
	line-height:1.25;
	color:var(--ast-global-color-2, #484848);
	text-wrap:balance;
}
.da-eintrag__auszug{
	margin:0 0 16px;
	font-size:16px;
	line-height:1.65;
	color:var(--ast-global-color-3, #6a6a6a);
	/* drei Zeilen halten die Kacheln auf einer Hoehe */
	display:-webkit-box;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
/* Der Hinweis sitzt unten, damit die Kacheln trotz unterschiedlich
   langer Titel auf einer Linie abschliessen. */
.da-eintrag__mehr{
	margin-top:auto;
	font-size:13px;
	letter-spacing:1.6px;
	text-transform:uppercase;
	color:var(--ast-global-color-2, #484848);
	border-bottom:1px solid currentColor;
	padding-bottom:3px;
	align-self:flex-start;
	transition:opacity 180ms ease-out;
}
.da-eintrag__link:hover .da-eintrag__mehr{opacity:.55;}
.da-eintrag__link:focus-visible{
	outline:2px solid var(--ast-global-color-2, #484848);
	outline-offset:6px;
	border-radius:3px;
}

/* ---------- Blaettern ---------- */
.da-blaettern{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:8px;
	margin:56px auto 0;
	padding:0 20px;
}
.da-archiv .page-numbers{
	display:inline-block;
	padding:10px 16px;
	border:1px solid #dbdbdb;
	border-radius:3px;
	text-decoration:none;
	font-size:15px;
	color:var(--ast-global-color-2, #484848);
	transition:background-color 180ms ease-out, border-color 180ms ease-out;
}
.da-archiv a.page-numbers:hover{
	background-color:#f4f2ee;
	border-color:var(--ast-global-color-2, #484848);
}
.da-archiv .page-numbers.current{
	background-color:var(--ast-global-color-2, #484848);
	border-color:var(--ast-global-color-2, #484848);
	color:#ffffff;
}
.da-archiv .page-numbers.dots{border-color:transparent;}

.da-archiv__leer{
	max-width:640px;
	margin:44px auto 0;
	padding:0 20px;
	text-align:center;
	font-size:17px;
	line-height:1.7;
	color:var(--ast-global-color-3, #6a6a6a);
}

@media (max-width:1024px){
	.da-archiv__kopf{padding:52px 18px 6px;}
	.da-archiv__glas{padding:30px 24px 28px;}
	.da-archiv__liste{gap:36px 26px;}
	.da-eintrag__titel{font-size:21px;}
}
@media (max-width:767px){
	.da-archiv{padding-bottom:50px;}
	.da-archiv__kopf{padding:34px 14px 4px;}
	.da-archiv__glas{padding:26px 20px 24px;border-radius:4px;}
	.da-archiv__grund{filter:blur(22px) saturate(1.1);}
	.da-archiv__titel{font-size:29px;}
	.da-archiv__text{font-size:16px;}
	.da-archiv__liste{
		grid-template-columns:1fr;
		gap:34px;
		margin-top:32px;
		padding:0 16px;
	}
	.da-eintrag__titel{font-size:20px;}
	.da-eintrag__auszug{font-size:15px;}
}
@media (prefers-reduced-motion:reduce){
	.da-eintrag__bild img{transition:none;}
	.da-eintrag__link:hover .da-eintrag__bild img{transform:none;}
}