/**
 * Publikationsarchiv der IG LEBENSZYKLUS BAU.
 *
 * Aufbau:
 *   1. Tokens      - Farben, Abstaende, Typo an einer Stelle
 *   2. Bausteine   - Button, Chip, Icon (ueberall wiederverwendet)
 *   3. Archiv      - Suche, Filter, Liste
 *   4. Detail      - Overlay mit Reitern
 *   5. Prosa       - importierter Volltext
 *   6. Transition  - View Transition und Fallback
 *
 * Die Markenfarben entsprechen den Theme-Klassen brand_* aus styles-2021.css.
 */

/* ------------------------------------------------------------------ *
 * 1. Tokens
 * ------------------------------------------------------------------ */

/* Die Schrift wird durchgehend geglaettet statt subpixelweise gerastert. Die
   Seite setzt viel halbfette und fette Barlow Condensed auf hellem Grund -
   subpixelweise wirkt die schmale Schrift dort schwerer, als sie gezeichnet
   ist. Gilt fuer das ganze Dokument, nicht nur fuer das Archiv. */
html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Die Detailansicht ist ein eigenes Dokument und liegt damit ausserhalb von
   .ig-pub - sie braucht die Tokens deshalb selbst. */
.ig-pub,
.ig-pub-detail,
.ig-pub-layer {
	--ig-pub-blue-1: #00608d;
	--ig-pub-blue-2: #64c4e0;
	--ig-pub-green-1: #4baba5;
	--ig-pub-green-2: #3b5c56;
	--ig-pub-green-3: #99c033;

	--ig-pub-fg: #000;
	--ig-pub-body: #494948;
	--ig-pub-bg: #f5f5f5;
	--ig-pub-surface: #fff;
	--ig-pub-muted: rgba(0, 0, 0, 0.5);
	--ig-pub-line: #000;

	--ig-pub-border: 0.125rem;
	--ig-pub-border-strong: 0.1875rem;
	--ig-pub-radius: 0.25rem;

	--ig-pub-space-xs: 0.375rem;
	--ig-pub-space-s: 0.75rem;
	--ig-pub-space-m: 1.25rem;
	--ig-pub-space-l: 2rem;
	--ig-pub-space-xl: 3.5rem;

	/* Schriftgroessen nach dem Entwurf (gezeichnet fuer 1514px Breite):
	     110px  Seitentitel "PUBLIKATIONEN & VIDEOS"
	      45px  Zeilentitel und Jahr
	      40px  Zurueck-Link, Suchfeld, FILTER, "Weitere Inhalte laden"
	      28px  Einleitung, "Info oeffnen", "Partner:innen"
	      25px  Teaser und Autor:innen im aufgeklappten Zustand
	      20px  Schlagworte, Fliesstext
	      16px  Meta-Angaben
	   Alle Grade erreichen ihren Entwurfswert ab etwa 1000px Breite und
	   skalieren darunter mit. Fest bleiben nur 20px und 16px - kleiner sollen
	   Schlagworte, Fliesstext und Meta-Angaben nirgends werden. */
	--ig-pub-fs-display: clamp(2.5rem, 0.4rem + 7.4vw, 6.875rem);
	--ig-pub-fs-display-sm: clamp(2.25rem, 0.9rem + 5.5vw, 6rem);
	--ig-pub-fs-title: clamp(1.75rem, 1rem + 3.2vw, 2.8125rem);
	--ig-pub-fs-bar: clamp(1.25rem, 0.5rem + 3.2vw, 2.5rem);
	--ig-pub-fs-lead: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
	--ig-pub-fs-panel: clamp(1.125rem, 0.95rem + 0.85vw, 1.5625rem);
	--ig-pub-fs-body: 1.25rem;
	/* Fliesstext der Lesespalte. Im Entwurf 25px auf 30px Zeilenabstand -
	   nachgemessen am gerenderten Absatz aus Frame 49: 909px Satzbreite,
	   Grundlinien exakt 30px auseinander. Der Absatzabstand ist genau eine
	   Leerzeile. Bewusst eigener Grad statt --ig-pub-fs-body: der gilt weiter
	   fuer Schlagworte, Teaser und Verzeichnisse. */
	--ig-pub-fs-prose: 1.5625rem;
	--ig-pub-fs-chip: 1.25rem;
	--ig-pub-fs-small: 1rem;

	/* Hoehe des Suchfeldes. Im Entwurf 64px bei 40px Schrift - alles darin
	   (Lupe, Knopfbreite, Strichstaerke) ist ein Vielfaches davon. Auf dem
	   Handy faellt der Grad auf 20px, das Feld waere mit festen 64px dann
	   doppelt so hoch wie noetig und die Lupe fast so gross wie das Feld.
	   Deshalb waechst es mit dem Grad mit, bleibt aber mindestens 44px hoch -
	   darunter ist der Knopf mit dem Finger nicht mehr sicher zu treffen. */
	--ig-pub-search-h: max(2.75rem, calc(var(--ig-pub-fs-bar) * 1.6));

	/* Kopfzeilen: Die beiden Kopfzeilen - der Zurueck-Balken des Archivs und
	   die Reiterleiste der Publikation - skalieren als Ganzes mit der
	   Viewport-Breite. Getrieben wird das von einer einzigen Groesse: sie
	   erreicht den Entwurfswert (45px) genau bei 1514px Breite und wird
	   darunter linear kleiner bis zu einem Sockel von 24px. Alle uebrigen
	   Masse der Kopfzeile haengen als Vielfaches daran, damit die
	   Proportionen des Entwurfs in jeder Breite erhalten bleiben:
	     45px Schrift · 62px Knopfhoehe · 86px Schliessen · 34.7x30.5 Kreuz
	     40px Zurueck-Text · 56px Balkenhoehe · 32px und 12px Abstaende
	   Die Steigung ist bewusst steiler als bei den uebrigen Graden: so passt
	   die Kopfzeile bis etwa 960px in eine Zeile, und erst darunter greift
	   der Umbruch (siehe Medienabfrage weiter unten). */
	--ig-pub-head-fs: clamp(1.5rem, 0.165rem + 2.8vw, 2.8125rem);
	--ig-pub-head-fs-back: calc(var(--ig-pub-head-fs) * 0.889);
	/* max(): Knoepfe bleiben mindestens 44px hoch bzw. breit - darunter sind
	   sie mit dem Finger nicht mehr sicher zu treffen. */
	--ig-pub-head-h: max(2.75rem, calc(var(--ig-pub-head-fs) * 1.378));
	--ig-pub-head-h-back: max(2.75rem, calc(var(--ig-pub-head-fs) * 1.244));
	--ig-pub-head-close: max(2.75rem, calc(var(--ig-pub-head-fs) * 1.911));
	--ig-pub-head-icon-w: calc(var(--ig-pub-head-fs) * 0.770);
	--ig-pub-head-icon-h: calc(var(--ig-pub-head-fs) * 0.678);
	--ig-pub-head-gap: calc(var(--ig-pub-head-fs) * 0.711);
	--ig-pub-head-gap-s: calc(var(--ig-pub-head-fs) * 0.267);

	/* Breite der Lesespalte in der Detailansicht. Titel und Inhalt aller
	   Reiter teilen sie sich, damit die Spalte beim Umschalten nicht springt
	   und die Ueberschrift buendig ueber dem Text steht. 57rem = 912px: im
	   Entwurf ist die Textspalte 915px breit und sitzt mittig in der 1514px
	   breiten Seite (Rand links 302px, rechts 297px). */
	--ig-pub-measure: 57rem;

	--ig-pub-font: 'Barlow Condensed', 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ig-pub-ease: cubic-bezier(0.22, 1, 0.36, 1);

	/* Erlaubt das Animieren auf block-size: auto - ohne das koennte der
	   aufklappende Inhalt nicht weich wachsen. Wird vererbt. */
	interpolate-size: allow-keywords;
}

.ig-pub,
.ig-pub-detail {
	font-family: var(--ig-pub-font);
	color: var(--ig-pub-fg);
	box-sizing: border-box;
}

.ig-pub-layer,
.ig-pub *,
.ig-pub *::before,
.ig-pub *::after,
.ig-pub-detail *,
.ig-pub-detail *::before,
.ig-pub-detail *::after,
.ig-pub-layer *,
.ig-pub-layer *::before,
.ig-pub-layer *::after {
	box-sizing: border-box;
}

/* Sichtbarer Fokus - gilt fuer jedes interaktive Element im Plugin. */
.ig-pub :focus-visible,
.ig-pub-detail :focus-visible {
	outline: 0.1875rem solid var(--ig-pub-blue-1);
	outline-offset: 0.125rem;
	border-radius: 0.125rem;
}

/* ------------------------------------------------------------------ *
 * 2. Bausteine
 * ------------------------------------------------------------------ */

.ig-pub__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ig-pub-space-xs);
	/* Hoehe am Schriftgrad statt fest: 51px bei 28px im Entwurf, also 1.82em.
	   Auf dem Handy faellt der Grad auf 21px, der Knopf waere mit festen 51px
	   deutlich zu hoch fuer seine Schrift. Mindestens 2.75rem bleiben stehen -
	   darunter ist er mit dem Finger nicht mehr sicher zu treffen. */
	min-height: max(2.75rem, 1.82em);
	/* Keine vertikale Polsterung: sonst waechst der Knopf ueber die im
	   Entwurf vorgesehene Hoehe hinaus. Zentriert wird ueber align-items.
	   Seitlich 0.375em - nachgerechnet an den Knoepfen der Kopfzeile im
	   Entwurf: "Inhaltsverzeichnis" ist dort 325px breit bei 290.8px Text und
	   2px Rahmen, "Downloads" 214px bei 171.9px Text. Das sind 15 bzw. 19px
	   je Seite bei 45px Schrift, also rund drei Achtel des Schriftgrads. */
	padding: 0 0.375em;
	border: var(--ig-pub-border-strong) solid var(--ig-pub-fg);
	border-radius: var(--ig-pub-radius);
	background: transparent;
	color: var(--ig-pub-fg);
	font: inherit;
	font-size: var(--ig-pub-fs-lead);
	font-weight: 600;
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s var(--ig-pub-ease), color 0.15s var(--ig-pub-ease);
}

/* Der Knopf ist mal ein <a>, mal ein <summary> - letzteres braechte sonst ein
   Aufklappdreieck mit. */
.ig-pub__button {
	list-style: none;
}

.ig-pub__button::-webkit-details-marker {
	display: none;
}

.ig-pub__button::marker {
	content: '';
}

.ig-pub__button--solid {
	background: var(--ig-pub-fg);
	color: var(--ig-pub-surface);
}

/* Schwarze Knoepfe kehren sich beim Hover um: Flaeche frei, Schrift schwarz -
   genau andersherum als die Filter-Chips. Transparent statt weiss, weil die
   Ebene auf einem leichten Grau liegt; eine weisse Flaeche wuerde sich davon
   absetzen. Der Rahmen bleibt schwarz, sonst verschwaende der Knopf. */
.ig-pub__button--solid:hover,
.ig-pub__button--solid:focus-visible {
	background: transparent;
	color: var(--ig-pub-fg);
}

.ig-pub__button--wide {
	width: 100%;
	font-size: var(--ig-pub-fs-bar);
	text-transform: uppercase;
}

.ig-pub__button[aria-disabled='true'] {
	opacity: 0.55;
	cursor: default;
}

/* Schlagwort-Chip. Die Checkbox liegt visuell verborgen darunter, damit der
   Filter ohne JavaScript als Formular funktioniert. */
/* Die 35px des Entwurfs entstehen aus der Polsterung, nicht aus einer
   Mindesthoehe: Eine Mindesthoehe zwingt zum Zentrieren des Zeilenkastens,
   und der sitzt nicht symmetrisch um die Versalien - die Schrift steht dann
   knapp zu tief. Mit padding-block bestimmt die Schrift die Hoehe.
   0.175em = 3.5px bei 20px Schrift: 24px Zeilenkasten + 7px + 4px Rahmen. */
.ig-pub-tag,
.ig-pub__chip {
	display: block;
	padding: 0.175em 0.85em;
	border: var(--ig-pub-border) solid var(--ig-pub-fg);
	border-radius: var(--ig-pub-radius);
	background: transparent;
	font-size: var(--ig-pub-fs-chip);
	font-weight: 600;
	line-height: 1.2;
}

/* Wo der Browser es kann, schneidet text-box den Zeilenkasten auf das
   Versalband zurueck: oben an die Versalhoehe, unten an die Grundlinie. Die
   Polsterung umschliesst dann genau die sichtbare Schrift, und die Zentrierung
   stimmt ohne Korrekturwert. Die Versalhoehe von Barlow Condensed betraegt
   0.7em, also 14px bei 20px Schrift - bleiben 8.5px Polsterung je Seite fuer
   dieselben 35px. */
@supports (text-box: trim-both cap alphabetic) {
	.ig-pub-tag,
	.ig-pub__chip {
		text-box: trim-both cap alphabetic;
		padding-block: 0.425em;
	}
}

/* Die Schlagworte sind Links - ohne eigene Farbe wuerde die blaue
   Standardfarbe des Browsers durchschlagen. */
.ig-pub__chip {
	cursor: pointer;
	color: var(--ig-pub-fg);
	text-decoration: none;
	transition: background-color 0.15s var(--ig-pub-ease), color 0.15s var(--ig-pub-ease);
}

/* Hover wie der gesetzte Zustand: schwarze Flaeche, Schrift invertiert -
   sonst bliebe der Text auf Schwarz unlesbar. */
.ig-pub__chip:hover {
	background: var(--ig-pub-fg);
	color: var(--ig-pub-surface);
}

/* Gewaehltes Schlagwort - sieht aus wie der Hover, weil es derselbe Zustand
   ist: dieses Schlagwort filtert gerade. */
.ig-pub__chip.is-active {
	background: var(--ig-pub-fg);
	color: var(--ig-pub-surface);
}

.ig-pub__icon {
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	background: currentColor;
}

/* Lupe wie im Entwurf: ein Kreis mit 3px Kontur und ein ebenso starker Griff,
   um -45 Grad gedreht. Masse aus der Vorlage bei 64px Feldhoehe - Kreis 29px,
   Griff 17px, Kontur 3px; die gedrehte Bounding-Box misst damit rund 53px.
   Als Anteile der Feldhoehe geschrieben, damit die Lupe mitschrumpft, wenn
   das Feld auf dem Handy kleiner wird. */
.ig-pub__icon--search {
	--ig-pub-lupe-kreis: calc(var(--ig-pub-search-h) * 0.453);
	--ig-pub-lupe-strich: calc(var(--ig-pub-search-h) * 0.047);

	position: relative;
	width: var(--ig-pub-lupe-kreis);
	height: calc(var(--ig-pub-search-h) * 0.719);
	background: none;
	-webkit-mask: none;
	mask: none;
	transform: rotate(-45deg);
}

.ig-pub__icon--search::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: var(--ig-pub-lupe-kreis);
	height: var(--ig-pub-lupe-kreis);
	border: var(--ig-pub-lupe-strich) solid currentColor;
	border-radius: 50%;
}

.ig-pub__icon--search::after {
	content: '';
	position: absolute;
	top: var(--ig-pub-lupe-kreis);
	left: calc(50% - var(--ig-pub-lupe-strich) / 2);
	width: var(--ig-pub-lupe-strich);
	height: calc(var(--ig-pub-search-h) * 0.266);
	background: currentColor;
}

.ig-pub__icon--plus {
	position: relative;
	width: 1.625rem;
	height: 1.4375rem;
	background: none;
	-webkit-mask: none;
	mask: none;
}

.ig-pub__icon--plus::before,
.ig-pub__icon--plus::after {
	content: '';
	position: absolute;
	background: currentColor;
}

.ig-pub__icon--plus::before {
	top: calc(50% - 0.0625rem);
	left: 0;
	right: 0;
	height: 0.125rem;
}

.ig-pub__icon--plus::after {
	top: 0;
	bottom: 0;
	left: calc(50% - 0.0625rem);
	width: 0.125rem;
	transition: transform 0.15s var(--ig-pub-ease);
}

/* Schliessen-Kreuz nach dem Entwurf: zwei gekreuzte Linien mit runden Enden,
   3px stark - keine ausgefuellte Flaeche. Die Koordinaten sind die aus Figma,
   nur aus der Matrix ausgerechnet und auf den Umriss des Kreuzes beschnitten:
   34.66 x 30.5 Einheiten. Der viewBox sitzt damit eng am Zeichen, sodass die
   Groesse im CSS genau das ist, was man sieht - und das Kreuz ist wie im
   Entwurf etwas breiter als hoch. */
.ig-pub__icon--close {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34.66 30.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M1.11 29.5 33.52 0.99M1.11 0.99 33.52 29.5'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34.66 30.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M1.11 29.5 33.52 0.99M1.11 0.99 33.52 29.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ------------------------------------------------------------------ *
 * 3. Archiv
 * ------------------------------------------------------------------ */

.ig-pub {
	background: var(--ig-pub-bg);
	padding: var(--ig-pub-space-l) 0 var(--ig-pub-space-xl);
}

.ig-pub__controls {
	margin-bottom: var(--ig-pub-space-l);
}

.ig-pub__search {
	position: relative;
	display: flex;
	align-items: stretch;
	border: var(--ig-pub-border-strong) solid var(--ig-pub-fg);
	border-radius: var(--ig-pub-radius);
	background: var(--ig-pub-surface);
}

/* Das Label ist sichtbar, sobald etwas eingegeben wurde - der Platzhalter
   allein waere keine dauerhafte Beschriftung. */
.ig-pub__search-label {
	position: absolute;
	width: 0.0625rem;
	height: 0.0625rem;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ig-pub__search-input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: calc(var(--ig-pub-search-h) - 2 * var(--ig-pub-border-strong));
	/* Seitlich ein Anteil der Feldhoehe statt eines festen Masses - bei 64px
	   sind das die bisherigen 20px, auf dem Handy schrumpft es mit dem Feld
	   mit. Dort zaehlt jeder Millimeter: Der Platzhalter wird sonst frueh
	   abgeschnitten. */
	padding: 0 calc(var(--ig-pub-search-h) * 0.3125);
	border: 0;
	background: transparent;
	font: inherit;
	font-size: var(--ig-pub-fs-bar);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--ig-pub-fg);
}

.ig-pub__search-input::placeholder {
	color: var(--ig-pub-muted);
	opacity: 1;
}

.ig-pub__search-submit {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Quadratisch: Die gedrehte Lupe braucht in der Breite so viel wie das
	   Feld hoch ist. */
	width: var(--ig-pub-search-h);
	border: 0;
	background: transparent;
	color: var(--ig-pub-fg);
	cursor: pointer;
}



.ig-pub__filter {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: var(--ig-pub-space-s);
	margin: var(--ig-pub-space-m) 0 0;
	padding: 0;
	border: 0;
}

/* Auf dieselbe Hoehe wie ein Schlagwort zentriert. Der Container bleibt
   oben ausgerichtet, damit die Liste aufgeklappt nach unten waechst. */
.ig-pub__filter-legend {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	/* Feste Chiphoehe statt min-height: die 40px-Schrift baut sonst eine
	   hoehere Box. Die Versalien sind deutlich niedriger als die Zeile, es
	   wird nichts abgeschnitten. */
	height: 2.1875rem;
	line-height: 1;
	/* Optischer Ausgleich: Die Versalmitte von "FILTER" liegt ohne Korrektur
	   3.5px unter der der Schlagworte (gemessen bei 40px gegen 20px; die
	   Schlagworte selbst sitzen mit 11.5/9.5px Luft mittig in ihrer Pille).
	   -0.0875em hebt die Versalien auf dieselbe Hoehe; in em, damit der
	   Ausgleich mit der Schrift skaliert. */
	transform: translateY(-0.0875em);
	padding: 0;
	margin-right: var(--ig-pub-space-s);
	font-size: var(--ig-pub-fs-bar);
	font-weight: 600;
	text-transform: uppercase;
}

/* Grundzustand - auch ohne JavaScript: alle Schlagworte sichtbar, mehrzeilig. */
.ig-pub__chips {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ig-pub-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Mit JavaScript: eine Zeile, die neben der Beschriftung den restlichen Platz
   einnimmt. Was nicht hineinpasst, laeuft ueber und wird am rechten Rand
   ausgeblendet - der "+"-Knopf daneben klappt alles auf.
   Ueberlauf statt Ausblenden per hidden: so bleiben die Schlagworte fuer
   Tastatur und Screenreader erreichbar, der Fokus scrollt sie ins Bild. */
.ig-pub__chips.is-single-row {
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
}

.ig-pub__chips::-webkit-scrollbar {
	display: none;
}

/* Die Ausblendung sitzt nur dann, wenn wirklich etwas ueberlaeuft.
   Der Auslauf rechts vergroessert den Scrollweg, damit auch das letzte
   Schlagwort ganz aus dem Verlauf herausgescrollt werden kann. */
.ig-pub__chips.has-overflow {
	padding-right: 4rem;
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 4rem), transparent 100%);
	mask-image: linear-gradient(to right, #000 calc(100% - 4rem), transparent 100%);
}

/* Aufgeklappt: zurueck in den mehrzeiligen Grundzustand - und jede weitere
   Zeile beginnt ganz links, statt unter der Beschriftung eingerueckt zu
   bleiben. Dafuer rueckt die Liste um die Breite der Beschriftung nach links
   und haelt sich den Platz nur in der ersten Zeile frei, ueber ein leeres
   Element davor. Die Breite misst das Skript - sie haengt an Text und
   Schriftgrad und laesst sich hier nicht beziffern. Ohne Skript gibt es den
   aufgeklappten Zustand ohnehin nicht. */
.ig-pub__chips.is-expanded {
	flex-wrap: wrap;
	overflow: visible;
	padding-right: 0;
	-webkit-mask-image: none;
	mask-image: none;
	margin-left: calc(-1 * var(--ig-pub-filter-label, 0px));
}

.ig-pub__chips.is-expanded::before {
	content: '';
	flex: 0 0 auto;
	/* Abzueglich des Listenabstands: Der liegt zwischen dem Platzhalter und
	   dem ersten Schlagwort und wuerde die erste Zeile sonst um genau diesen
	   Betrag nach rechts schieben. */
	width: calc(var(--ig-pub-filter-label, 0px) - var(--ig-pub-space-xs));
}

.ig-pub__chip-item {
	flex: 0 0 auto;
}

/* Gleiche Hoehe wie die Schlagwort-Chips - der Knopf steht in derselben Reihe
   und darf nicht herausragen. 35px liegen ueber der Mindestgroesse von 24px
   aus WCAG 2.2, die Chips selbst sind genauso hoch. */
.ig-pub__chips-toggle {
	flex: 0 0 auto;
	/* Im Quelltext steht der Knopf vor der Liste (siehe archive.php); in der
	   Flex-Darstellung gehoert er ans Ende der Zeile. */
	order: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1875rem;
	height: 2.1875rem;
	padding: 0;
	border: var(--ig-pub-border) solid var(--ig-pub-fg);
	border-radius: var(--ig-pub-radius);
	background: var(--ig-pub-fg);
	color: var(--ig-pub-surface);
	cursor: pointer;
	transition: background-color 0.15s var(--ig-pub-ease), color 0.15s var(--ig-pub-ease);
}

.ig-pub__chips-toggle:hover,
.ig-pub__chips-toggle:focus-visible {
	background: transparent;
	color: var(--ig-pub-fg);
}

.ig-pub__chips-toggle[hidden] {
	display: none;
}

/* Aufgeklappt faehrt der senkrechte Strich zur Mitte ein - aus dem Plus wird
   ein Minus. scaleY(0) skaliert vom Mittelpunkt aus, also genau auf den
   waagrechten Strich zu. */
.ig-pub__chips-toggle.is-expanded .ig-pub__icon--plus::after {
	transform: scaleY(0);
}

.ig-pub__chips-toggle-text {
	position: absolute;
	width: 0.0625rem;
	height: 0.0625rem;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Die Zaehlzeile stand als einzige Angabe im Archiv auf dem Meta-Grad und
   fiel damit aus der Reihe. Jetzt derselbe Grad wie Schlagworte und Teaser
   darunter - grau bleibt sie, sie ist eine Nebenangabe. */
.ig-pub__status {
	margin: 0 0 var(--ig-pub-space-m);
	font-size: var(--ig-pub-fs-body);
	color: var(--ig-pub-body);
}

.ig-pub__empty {
	padding: var(--ig-pub-space-l) 0;
	font-size: var(--ig-pub-fs-lead);
}

/* --- Eintrag --- */

.ig-pub-item {
	/* Kein Innenabstand unten: der Knopf sitzt buendig auf der Trennlinie. */
	position: relative;
	padding: var(--ig-pub-space-m) 0 var(--ig-pub-border-strong);
	/* Die ganze Zeile klappt auf (siehe Skript) - der Zeiger zeigt es an. */
	cursor: pointer;
}

/* Im aufgeklappten Inhalt nicht: Dort wird gelesen, kopiert und geklickt,
   und ein Klick schaltet dort auch nichts um. */
.ig-pub-item__panel {
	cursor: auto;
}

/* Die Trennlinien des Entwurfs haben runde Enden - wie die Striche des
   Schliessen-Kreuzes. Als border-bottom liesse sich das nicht machen, deshalb
   ein eigenes Element mit voller Rundung. Die Hoehe entspricht der frueheren
   Rahmenstaerke, der Innenabstand unten haelt den Platz dafuer frei. */
.ig-pub-item::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--ig-pub-border-strong);
	/* Rechts eckig: Dort sitzt der Aufklapp-Knopf buendig auf der Linie, und
	   die Rundung liesse an seiner unteren rechten Ecke eine kleine Luecke
	   stehen - sichtbar, sobald der Knopf beim Hover durchsichtig wird. Das
	   eckige Ende steckt vollstaendig unter seinem Rahmen. Links bleibt es
	   rund, dort liegt die Kante frei. */
	border-radius: var(--ig-pub-border-strong) 0 0 var(--ig-pub-border-strong);
	background: var(--ig-pub-line);
}

.ig-pub-item__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ig-pub-space-m);
}

.ig-pub-item__title {
	margin: 0;
	font-family: var(--ig-pub-font);
	font-size: var(--ig-pub-fs-title);
	font-weight: 600;
	line-height: 1.05;
	color: var(--ig-pub-fg);
}

/* Der Stern steht im Entwurf als schwarze Kachel am Anfang der
   Schlagwortzeile, nicht im Titel. */
.ig-pub-item__star {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Masse aus dem Entwurf (Group 99): 36.26 x 34.58. Mit der engen
	   Sternmaske ergibt das ringsum denselben Rand - 5.38 seitlich, 5.35 oben
	   und unten. Bei den bisherigen 36 x 35 war er oben und unten groesser. */
	width: 2.266rem;
	height: 2.161rem;
	border-radius: var(--ig-pub-radius);
	background: var(--ig-pub-fg);
}

/* Stern nach dem Entwurf: eine Kontur, keine gefuellte Flaeche. Als Maske
   bleibt deshalb der Strich stehen - fill: none, stroke 2.

   Der viewBox ist enger als der Export: Der Pfad misst mit Strich 25.5 x 23.88,
   der Export-Rahmen aber 26 x 24. Die halbe Pixel Luft rechts sass nur auf
   einer Seite und kippte den Stern sichtbar aus der Mitte der Kachel. */
.ig-pub-item__star-icon {
	width: 1.594rem;
	height: 1.493rem;
	background: var(--ig-pub-surface);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25.5 23.88' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M10.8838 2.28027C11.5424 0.573821 13.9567 0.573733 14.6152 2.28027L15.8174 5.39746C16.3968 6.89959 17.8204 7.90781 19.4297 7.95605L22.5547 8.0498C24.461 8.10712 25.2131 10.5463 23.6699 11.667L21.5361 13.2158C20.1495 14.2226 19.5578 16.001 20.0654 17.6377L20.8848 20.2793C21.4358 22.0565 19.4744 23.5573 17.9033 22.5605L14.8926 20.6494C13.5843 19.8192 11.9137 19.8191 10.6055 20.6494L7.5957 22.5605C6.02465 23.5576 4.06236 22.0565 4.61328 20.2793L5.43262 17.6377C5.9403 16.0009 5.34875 14.2226 3.96191 13.2158L1.8291 11.667C0.285519 10.5463 1.03769 8.10681 2.94434 8.0498L6.06836 7.95605C7.67775 7.908 9.10118 6.89966 9.68066 5.39746L10.8838 2.28027Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25.5 23.88' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M10.8838 2.28027C11.5424 0.573821 13.9567 0.573733 14.6152 2.28027L15.8174 5.39746C16.3968 6.89959 17.8204 7.90781 19.4297 7.95605L22.5547 8.0498C24.461 8.10712 25.2131 10.5463 23.6699 11.667L21.5361 13.2158C20.1495 14.2226 19.5578 16.001 20.0654 17.6377L20.8848 20.2793C21.4358 22.0565 19.4744 23.5573 17.9033 22.5605L14.8926 20.6494C13.5843 19.8192 11.9137 19.8191 10.6055 20.6494L7.5957 22.5605C6.02465 23.5576 4.06236 22.0565 4.61328 20.2793L5.43262 17.6377C5.9403 16.0009 5.34875 14.2226 3.96191 13.2158L1.8291 11.667C0.285519 10.5463 1.03769 8.10681 2.94434 8.0498L6.06836 7.95605C7.67775 7.908 9.10118 6.89966 9.68066 5.39746L10.8838 2.28027Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.ig-pub-item__year {
	flex: 0 0 auto;
	margin: 0;
	font-size: var(--ig-pub-fs-title);
	font-weight: 600;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
}

.ig-pub-item__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ig-pub-space-xs);
	margin: var(--ig-pub-space-s) 0 0;
	padding: 0;
	list-style: none;
}

/* --- Auf- und zuklappen ---------------------------------------------- *
 * <details> liefert das Verhalten ohne JavaScript. Die Reihenfolge im
 * Markup ist summary -> Inhalt; column-reverse dreht sie visuell um, damit
 * der Inhalt ueber dem Knopf steht und der Knopf direkt auf der Trennlinie
 * sitzt - so wie im Entwurf.
 */
.ig-pub-item__details {
	display: flex;
	flex-direction: column-reverse;
}

.ig-pub-item__toggle {
	align-self: flex-end;
	/* block statt inline-flex: text-box greift nur an einem Blockcontainer.
	   Als Flex-Element der Zeile bleibt die Breite trotzdem inhaltsbreit. */
	display: block;
	text-align: center;
	/* Die Hoehe kommt aus der Polsterung, nicht aus einem Mindestmass: Bei
	   display: block haengt ueberzaehliger Platz unten an, die Schrift saesse
	   dann zu hoch. --ig-pub-toggle-h gibt die Zielhoehe an, die Polsterung
	   rechnet sich daraus - abzueglich der Versalhoehe (0.70em) und des
	   Rahmens oben. 1.82em sind die 51px des Entwurfs bei 28px Schrift. */
	--ig-pub-toggle-h: 1.82em;

	/* Seitlich wie alle Knoepfe - siehe .ig-pub__button. */
	padding: calc((var(--ig-pub-toggle-h) - 0.70em - var(--ig-pub-border-strong)) / 2) 0.375em;
	border: var(--ig-pub-border-strong) solid var(--ig-pub-fg);
	/* Ohne eigene Unterkante: die Trennlinie der Zeile uebernimmt sie. Zwei
	   uebereinanderliegende Linien ergaeben sonst eine doppelt so dicke Kante. */
	border-bottom: 0;
	/* Unten eckig: der Knopf sitzt buendig auf der Trennlinie, eine Rundung
	   wuerde dort eine sichtbare Luecke zur Linie erzeugen. */
	border-radius: var(--ig-pub-radius) var(--ig-pub-radius) 0 0;
	background: var(--ig-pub-fg);
	color: var(--ig-pub-surface);
	font-size: var(--ig-pub-fs-lead);
	font-weight: 600;
	line-height: 1.1;
	cursor: pointer;
	list-style: none;
	transition: background-color 0.15s var(--ig-pub-ease);
}

/* Standard-Dreieck der Zusammenfassung entfernen. */
/* Wie bei den Schlagworten: text-box schneidet den Zeilenkasten auf das
   Versalband zurueck, die Polsterung umschliesst dann genau die sichtbare
   Schrift. Dieselben 0.425em wie dort. */
@supports (text-box: trim-both cap alphabetic) {
	.ig-pub-item__toggle {
		text-box: trim-both cap alphabetic;
		padding-block: calc((var(--ig-pub-toggle-h) - 0.70em - var(--ig-pub-border-strong)) / 2);
	}
}

.ig-pub-item__toggle::-webkit-details-marker {
	display: none;
}

.ig-pub-item__toggle::marker {
	content: '';
}

.ig-pub-item__toggle:hover,
.ig-pub-item__toggle:focus-visible {
	background: transparent;
	color: var(--ig-pub-fg);
}

/* Beschriftung wechselt ohne Skript. */
.ig-pub-item__details[open] .ig-pub-item__toggle-label--open,
.ig-pub-item__details:not([open]) .ig-pub-item__toggle-label--close {
	display: none;
}

/* --- Aufgeklappter Inhalt -------------------------------------------- *
 * Entwurf: Teaser links, Autor:innen und die Einstiege rechts, beide
 * Spalten gleich breit.
 */
.ig-pub-item__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--ig-pub-space-l);
	/* Der Abstand zum Knopf gehoert hierher, nicht an den Knopf: Zugeklappt
	   faellt das Panel weg, und der Knopf soll dann ohne Luecke unter den
	   Schlagworten stehen. Aufgeklappt bleibt der Abstand derselbe. */
	padding: var(--ig-pub-space-m) 0;
}

.ig-pub-item__teaser p,
.ig-pub-item__authors {
	margin: 0 0 0.7em;
	/* Auch hier Silbentrennung - in der schmalen Spalte neben den Knoepfen
	   reissen die Komposita sonst breite Luecken. */
	hyphens: auto;
	-webkit-hyphens: auto;
	font-size: var(--ig-pub-fs-panel);
	/* "Medium" laut Entwurf - der Schnitt liegt dem Plugin bei. */
	font-weight: 500;
	line-height: 1.25;
	color: var(--ig-pub-fg);
}

/* Der letzte Absatz des Teasers traegt keinen Abstand nach unten: Stehen
   Teaser und Autor:innen untereinander - in schmalen Fenstern -, kaeme er zum
   Zeilenabstand des Panels hinzu, und die Luecke waere fast doppelt so gross
   wie beabsichtigt. */
.ig-pub-item__teaser p:last-child {
	margin-bottom: 0;
}

.ig-pub-item__authors {
	margin-bottom: var(--ig-pub-space-m);
}

.ig-pub-item__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ig-pub-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Ab Tablet abwaerts einspaltig - dieselbe Grenze wie beim Einleitungstext
   der Ebene. Nebeneinander bleiben Teaser und Knopfspalte sonst zu schmal. */
@media (max-width: 64em) {
	.ig-pub-item__panel {
		grid-template-columns: 1fr;
		gap: var(--ig-pub-space-m);
	}
}

/* --- Uebergang ------------------------------------------------------- *
 * ::details-content gibt es bisher nur in Chromium. Dort faehrt der Inhalt
 * auf; andere Browser klappen ohne Animation auf - das Verhalten bleibt in
 * jedem Fall gleich.
 */
@supports selector(::details-content) {
	.ig-pub-item__details::details-content {
		block-size: 0;
		overflow: hidden;
		transition:
			block-size 0.4s var(--ig-pub-ease),
			content-visibility 0.4s allow-discrete;
	}

	.ig-pub-item__details[open]::details-content {
		block-size: auto;
	}

	/* overflow: hidden braucht die Hoehenanimation - es schneidet aber auch den
	   Downloads-Aufklapper ab, der ueber die Zeile hinausragt. Nur solange er
	   offen ist, wird der Beschnitt aufgehoben. Zu diesem Zeitpunkt steht die
	   Zeile schon still, die Animation stoert das also nicht. */
	.ig-pub-item__details[open]:has([data-ig-pub-pop][open])::details-content {
		overflow: visible;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ig-pub-item__details::details-content {
		transition: none;
	}
}

.ig-pub__more {
	margin-top: var(--ig-pub-space-l);
}

/* ------------------------------------------------------------------ *
 * 4. Detailansicht
 * ------------------------------------------------------------------ */

.ig-pub-detail {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--ig-pub-bg);
}

/* Auf der Einzelseite ist die Detailansicht kein Overlay. */
.ig-pub-page .ig-pub-detail,
.entry-content .ig-pub-detail {
	height: auto;
	min-height: 60vh;
}

.ig-pub-detail__bar {
	flex: 0 0 auto;
	/* Nicht klebend: Die Kopfzeile ist auf dem Handy dreizeilig und nimmt dort
	   ein Drittel des Bildschirms weg. Sie scrollt mit dem Inhalt fort.
	   z-index bleibt, damit die Aufklapper ueber dem Text liegen. */
	position: relative;
	z-index: 2;
	background: var(--ig-pub-bg);
}

.ig-pub-detail__stripe {
	display: flex;
	height: 0.625rem;
}

.ig-pub-detail__stripe-part {
	flex: 1 1 20%;
}

/* Gleicher Rahmen wie der Inhalt, damit der erste Reiter mit dem Titel
   fluchtet. Oben genug Abstand, damit nichts den Farbbalken beruehrt. */
.ig-pub-detail__bar-inner {
	/* Bezug fuer die Aufklapper in schmalen Fenstern, siehe weiter unten. */
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	/* Senkrecht mehr Luft als waagrecht: Bricht die Zeile um, stossen sonst
	   die Knoepfe direkt unter die Linie der Reiter. */
	gap: var(--ig-pub-head-gap) var(--ig-pub-head-gap-s);
	width: 100%;
	max-width: 90rem;
	margin: 0 auto;
	padding: var(--ig-pub-head-gap) var(--ig-pub-gutter) calc(var(--ig-pub-head-fs) * 0.444);
}

/* --- Kopfzeile nach Entwurf (Frame 49) ---------------------------------
 * Links die Leseansichten als Textreiter (45px) mit duenner Linie darunter
 * und einem 16px hohen schwarzen Balken unter der aktiven; rechts
 * Inhaltsverzeichnis und Downloads als schwarze Knoepfe (62px hoch) und das
 * Schliessen-Kreuz.
 */
.ig-pub-detail__tabs {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--ig-pub-head-gap);
	padding-bottom: calc(var(--ig-pub-head-fs) * 0.356);
	/* Ohne min-width schrumpft ein Flex-Element nicht unter seine
	   Inhaltsbreite - die Reiter wuerden dann nie umbrechen und die Seite
	   seitlich ueberlaufen. */
	min-width: 0;
}

/* Durchgehende Linie unter der Reitergruppe. */
.ig-pub-detail__tabs::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(var(--ig-pub-head-fs) * 0.133);
	height: 0.1875rem;
	border-radius: 0.1875rem;
	background: var(--ig-pub-fg);
}

.ig-pub-detail__tab {
	/* Bezug fuer den Strich unter der aktiven Ansicht. */
	position: relative;
	color: var(--ig-pub-fg);
	font-size: var(--ig-pub-head-fs);
	font-weight: 600;
	line-height: 1.1;
	white-space: nowrap;
	/* Die Unterstreichung ist immer da, nur unsichtbar: So laesst sie sich
	   ueber die Farbe weich ein- und ausblenden - text-decoration selbst ist
	   nicht animierbar, text-decoration-color schon. Nebenbei bleibt der
	   Platzbedarf in jedem Zustand gleich, es ruckt also nichts. */
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 0.356em;
	text-underline-offset: 0.333em;
	text-decoration-skip-ink: none;
	transition: text-decoration-color 0.15s var(--ig-pub-ease);
}

/* Aktiver Reiter: kraeftiger Balken, liegt ueber der Linie - und derselbe
 * Balken beim Ueberfahren und im Tastaturfokus, sodass er vorwegnimmt, was
 * ein Klick auswaehlen wuerde.
 *
 * Der Balken ist eine Unterstreichung und kein Pseudo-Element: So gehoert er
 * zum Text statt zu einem Kasten, bricht mit ihm um und bleibt auch dann
 * richtig, wenn ein Reiter einmal zweizeilig wird. Die Masse stehen oben in
 * em und haengen damit am Schriftgrad der Kopfzeile: 16px Staerke und 15px
 * Abstand zur Grundlinie bei 45px - gemessen an der bisherigen Position des
 * Balkens. skip-ink: none, damit Unterlaengen (das "g" in "Kernergebnisse")
 * kein Loch hineinschneiden. */
/* Die aktive Ansicht traegt ihren Strich als Element, nicht als
   Unterstreichung - siehe .ig-pub-detail__tab-line. Beim Hover bleibt es bei
   der Unterstreichung; auf dem aktiven Reiter waere sie doppelt. */
.ig-pub-detail__tab:hover:not(.is-active),
.ig-pub-detail__tab:focus-visible:not(.is-active) {
	text-decoration-color: currentColor;
}

/* Der Strich der aktiven Ansicht.
 *
 * Bewusst ein eigenes Element statt der Unterstreichung: Nur ein Element kann
 * einen view-transition-name tragen und beim Ansichtswechsel von einem Reiter
 * zum naechsten wandern (siehe Abschnitt 8).
 *
 * Absolut gesetzt, damit sich am Layout nichts aendert - er sitzt genau dort,
 * wo die Unterstreichung sass: 0.938em unter der Oberkante des Reiters liegt
 * die Grundlinie (Schriftmass von Barlow Condensed bei line-height 1.1),
 * darunter kommen die 0.333em text-underline-offset. Dicke und Breite sind
 * dieselben wie zuvor - ohne seitliche Polsterung ist der Reiter genau so
 * breit wie seine Schrift. */
.ig-pub-detail__tab-line {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(0.938em + 0.333em);
	height: 0.356em;
	background: currentColor;
}

.ig-pub-detail__bar-actions {
	display: flex;
	flex-wrap: wrap;
	/* Rechtsbuendig, und zwar jede Zeile: brechen die Knoepfe um, soll die
	   zweite Zeile mit der ersten am rechten Rand abschliessen und nicht
	   links beginnen. margin-left fuer den Fall, dass die ganze Gruppe unter
	   die Reiter rutscht - dann steht sie als einziges Element in ihrer Zeile
	   und justify-content der Kopfzeile wuerde sie nach links setzen. */
	justify-content: flex-end;
	margin-left: auto;
	align-items: flex-start;
	gap: var(--ig-pub-head-gap-s);
	min-width: 0;
}

/* Knoepfe der Kopfzeile - groesser als die uebrigen Knoepfe im Archiv. */
.ig-pub-detail__bar-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ig-pub-head-h);
	padding: 0 0.375em;
	border: var(--ig-pub-border) solid var(--ig-pub-fg);
	border-radius: var(--ig-pub-radius);
	background: var(--ig-pub-fg);
	color: var(--ig-pub-surface);
	font-size: var(--ig-pub-head-fs);
	font-weight: 600;
	line-height: 1.1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	list-style: none;
	transition: background-color 0.15s var(--ig-pub-ease), color 0.15s var(--ig-pub-ease);
}

.ig-pub-detail__bar-button::-webkit-details-marker {
	display: none;
}

.ig-pub-detail__bar-button::marker {
	content: '';
}

.ig-pub-detail__bar-button:hover,
.ig-pub-detail__bar-button:focus-visible {
	background: transparent;
	color: var(--ig-pub-fg);
}

.ig-pub-detail__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ig-pub-head-close);
	min-height: var(--ig-pub-head-h);
	border: var(--ig-pub-border-strong) solid var(--ig-pub-fg);
	border-radius: var(--ig-pub-radius);
	background: var(--ig-pub-fg);
	color: var(--ig-pub-surface);
	transition: background-color 0.15s var(--ig-pub-ease), color 0.15s var(--ig-pub-ease);
}

.ig-pub-detail__close:hover,
.ig-pub-detail__close:focus-visible {
	background: transparent;
	color: var(--ig-pub-fg);
}

.ig-pub-detail__close .ig-pub__icon {
	width: var(--ig-pub-head-icon-w);
	height: var(--ig-pub-head-icon-h);
}

/* Downloads klappen unter der Kopfzeile auf. */
/* --- Aufklapper in der Kopfzeile (Inhaltsverzeichnis, Downloads) ---
 *
 * Beides sind <details>: So klappen sie ohne JavaScript auf und sind ueber die
 * Tastatur bedienbar. Das Skript ergaenzt nur Escape und den Klick daneben.
 *
 * Entwurf (Frame 58 und 63): weisse Flaeche, 3px Rahmen, die Eintraege durch
 * ebenso starke Linien getrennt, keine Polsterung am Rand der Liste - die
 * Trennlinien laufen deshalb von Rahmen zu Rahmen.
 */
.ig-pub__pop {
	position: relative;
}

.ig-pub__pop-panel {
	position: absolute;
	/* Rechtsbuendig zum Knopf: Die Flaechen sind breiter als ihre Knoepfe und
	   wuerden links ausgerichtet aus dem Fenster laufen. */
	right: 0;
	z-index: 3;
	width: max-content;
	max-width: min(40.5rem, calc(100vw - 2 * var(--ig-pub-gutter)));
	margin-top: var(--ig-pub-space-xs);
	border: var(--ig-pub-border-strong) solid var(--ig-pub-fg);
	border-radius: var(--ig-pub-radius);
	background: var(--ig-pub-surface);
}

.ig-pub__pop-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Wie im Entwurf nicht von Rand zu Rand, sondern auf dieselbe Breite
   eingerueckt wie die Beschriftung - und mit runden Enden. */
.ig-pub__pop-list li + li {
	position: relative;
}

.ig-pub__pop-list li + li::before {
	content: '';
	position: absolute;
	left: 0.55em;
	right: 0.55em;
	top: 0;
	height: var(--ig-pub-border-strong);
	border-radius: var(--ig-pub-border-strong);
	background: var(--ig-pub-fg);
	/* Die Linie liegt ueber den oberen Pixeln des Links darunter. Ohne das
	   traefe der Zeiger dort das <li> statt eines Links - beim Ueberfahren
	   verloren beide Nachbarn kurz den Hover, und die Liste flackerte. */
	pointer-events: none;
}

/* 0.55em Polsterung: Im Entwurf sind es 22px bei 40px Schrift und 16px bei
   28px - dasselbe Verhaeltnis, also eine Regel fuer beide Flaechen. */
.ig-pub__pop-list a {
	/* Dauerhaft ueber den Trennlinien, nicht erst beim Hover: So aendert der
	   Hover nur Farben und keine Stapelreihenfolge. Die Linien bleiben
	   trotzdem sichtbar - der Link ist durchsichtig, solange er nicht
	   markiert ist. */
	position: relative;
	z-index: 1;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ig-pub-space-m);
	padding: 0.55em;
	color: var(--ig-pub-fg);
	font-weight: 600;
	line-height: 1.1;
	text-decoration: none;
	/* Kein Ueberblenden: In einer Liste, ueber die der Zeiger zuegig
	   hinweggleitet, blendet sonst jeder Eintrag ein und gleich wieder aus -
	   das liest sich als Flackern. Wie in einem Menue wechselt die Markierung
	   deshalb sofort. */
}

.ig-pub__pop-list a:hover,
.ig-pub__pop-list a:focus-visible,
.ig-pub__pop-list a[aria-current='page'] {
	background: var(--ig-pub-fg);
	color: var(--ig-pub-surface);
}

/* Die schwarze Flaeche deckt die Trennlinie darunter ab. Die Linie gehoert zum
   naechsten Eintrag und sass sonst als schmaler Streifen mit runden Enden
   direkt unter der Flaeche.

   Ein Schatten ohne Unschaerfe verlaengert die Flaeche um die Linienstaerke
   nach unten. Anders als ein negativer Aussenabstand aendert er am Layout
   nichts: Der Hover wechselt damit ausschliesslich Farben. Jede Aenderung an
   Groesse oder Stapelreihenfolge beim Hover laesst den Browser neu pruefen,
   was unter dem Zeiger liegt - und kann ihn zwischen zwei Zustaenden
   pendeln lassen.

   Nicht beim letzten Eintrag - dort gibt es keine Linie mehr, und die
   eckige Flaeche ragte in die abgerundete Ecke des Rahmens. */
.ig-pub__pop-list li:not(:last-child) > a:hover,
.ig-pub__pop-list li:not(:last-child) > a:focus-visible,
.ig-pub__pop-list li:not(:last-child) > a[aria-current='page'] {
	box-shadow: 0 var(--ig-pub-border-strong) 0 var(--ig-pub-fg);
}

/* Der Grad steht an der Liste, nicht am Link: Polsterung und Einzug der
   Trennlinien rechnen in em und muessen sich auf denselben Grad beziehen. */

/* Inhaltsverzeichnis: 40px und versal wie die Kapitelzeilen im Volltext. */
.ig-pub__pop-panel--toc .ig-pub__pop-list {
	font-size: var(--ig-pub-fs-bar);
	text-transform: uppercase;
}

/* Downloads: 28px, Beschriftung wie eingegeben. */
.ig-pub__pop-panel--downloads .ig-pub__pop-list {
	font-size: var(--ig-pub-fs-lead);
}

.ig-pub__pop-meta {
	flex: 0 0 auto;
	font-size: var(--ig-pub-fs-small);
	font-weight: 400;
	white-space: nowrap;
	opacity: 0.7;
}

@media (max-width: 60em) {
	.ig-pub-detail__bar-inner {
		flex-wrap: wrap;
	}

	.ig-pub-detail__bar-button,
	.ig-pub-detail__tab {
		white-space: normal;
	}

	/* Rechtsbuendig zum Knopf geht hier nicht mehr auf: Sobald die Knoepfe
	   umbrechen, sitzt der Knopf weit links und die Flaeche liefe links aus
	   dem Bild. Deshalb spannt sie hier ueber die Breite der Kopfzeile - dafuer
	   gibt der Aufklapper seinen Positionsbezug ab. */
	.ig-pub-detail__bar-actions .ig-pub__pop {
		position: static;
	}

	.ig-pub-detail__bar-actions .ig-pub__pop-panel {
		left: var(--ig-pub-gutter);
		right: var(--ig-pub-gutter);
		width: auto;
		max-width: none;
	}

	/* Dasselbe im Archiv: Dort stehen die Knoepfe untereinander, der
	   Downloads-Knopf sitzt also links - rechtsbuendig zu ihm liefe die Flaeche
	   aus dem Bild. Sie spannt deshalb ueber die Knopfliste. */
	.ig-pub-item__actions {
		position: relative;
	}

	.ig-pub-item__actions .ig-pub__pop {
		position: static;
	}

	.ig-pub-item__actions .ig-pub__pop-panel {
		left: 0;
		right: 0;
		width: auto;
		max-width: none;
	}

}

.ig-pub-detail__body {
	flex: 1 1 auto;
	width: 100%;
	max-width: 90rem;
	margin: 0 auto;
	padding: var(--ig-pub-space-l) var(--ig-pub-gutter) var(--ig-pub-space-xl);
}

.ig-pub-detail__title {
	max-width: var(--ig-pub-measure);
	margin: 0 auto var(--ig-pub-space-l);
	font-size: var(--ig-pub-fs-title);
	font-weight: 600;
	line-height: 1.05;
}

/* Volltextansicht: Titel als Schauzeile am linken Seitenrand, nicht in der
   Lesespalte. Entwurfswerte 96px und 920px Satzbreite. */
.ig-pub-detail__title--display {
	max-width: 58rem;
	margin-left: 0;
	margin-right: auto;
	margin-bottom: var(--ig-pub-space-xl);
	font-size: var(--ig-pub-fs-display-sm);
	line-height: 1;
}

.ig-pub-detail__panel[hidden] {
	display: none;
}

.ig-pub-detail__results {
	max-width: var(--ig-pub-measure);
	margin: 0 auto;
	hyphens: auto;
	-webkit-hyphens: auto;
	padding-left: 1.4em;
	font-size: var(--ig-pub-fs-lead);
	font-weight: 600;
	line-height: 1.5;
}

.ig-pub-detail__results li {
	margin-bottom: 0.4em;
}

/* ------------------------------------------------------------------ *
 * 5. Prosa (importierter Volltext)
 *
 * Der Volltext besteht aus Core-Bloecken. Deshalb wird hier ueber
 * Elementselektoren gestaltet und nicht ueber eigene Klassen - so greift es
 * auch fuer alles, was die Redaktion spaeter im Editor ergaenzt.
 * ------------------------------------------------------------------ */

.ig-pub-prose {
	max-width: var(--ig-pub-measure);
	margin: 0 auto;
	color: var(--ig-pub-fg);
	/* Silbentrennung: Die langen Komposita ("lebenszyklusorientiert") reissen
	   sonst grosse Luecken in den Flattersatz, auf dem Handy bleibt oft nur
	   ein Wort je Zeile. Die Sprache kommt aus dem lang-Attribut des
	   Dokuments, das WordPress setzt. */
	hyphens: auto;
	-webkit-hyphens: auto;
	font-size: var(--ig-pub-fs-prose);
	/* Der Fliesstext steht im Entwurf im Medium-Schnitt, nicht im Regular -
	   nachgemessen an der Zeilenbreite: Die erste Zeile des Absatzes aus
	   Frame 49 ist 887px breit, im Regular waeren es 866px, im Medium 888px.
	   Das Unterkapitel (h3) steht im selben Schnitt und unterscheidet sich
	   nur ueber den Grad. */
	font-weight: 500;
	line-height: 1.2;
}

/* Entwurf: Kapitel- und Unterkapitelzeile beide 45px. Sie unterscheiden sich
   ueber Schnitt und Versalien, nicht ueber den Grad. Die Abstaende sind
   kleiner als em-Vielfache, weil der Grad hier deutlich groesser ist. */
.ig-pub-prose h2,
.ig-pub-prose h3,
.ig-pub-prose h4 {
	margin: 1.2em 0 0.4em;
	color: var(--ig-pub-fg);
	font-weight: 600;
	line-height: 1.15;
	/* Ueberschriften nicht trennen - in dem Grad faellt eine Trennung zu sehr
	   auf. Ein Wort, das breiter ist als die Spalte, bricht trotzdem um,
	   statt herauszuragen. */
	hyphens: manual;
	-webkit-hyphens: manual;
	overflow-wrap: break-word;
	/* Etwas Luft ueber der angesprungenen Zeile. Mehr braucht es nicht, seit
	   die Kopfzeile mitscrollt statt zu kleben. */
	scroll-margin-top: var(--ig-pub-space-m);
}

/* Kapitelzeile: fett, versal, Laufweite 3.6px bei 45px (= 0.08em, damit sie
   mit dem Grad skaliert). */
.ig-pub-prose h2 {
	font-size: var(--ig-pub-fs-title);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Unterkapitel: gleicher Grad, aber halbfett und ohne Laufweite. */
.ig-pub-prose h3 {
	font-size: var(--ig-pub-fs-title);
	font-weight: 500;
	letter-spacing: 0;
}

/* Der Entwurf kennt keine vierte Ebene - eine Stufe unter dem Unterkapitel. */
.ig-pub-prose h4 {
	font-size: var(--ig-pub-fs-lead);
}

.ig-pub-prose > *:first-child {
	margin-top: 0;
}

/* Fett im Fliesstext: der echte 700er Schnitt, den das Plugin mitbringt. */
.ig-pub-prose strong,
.ig-pub-prose b {
	font-weight: 700;
}

/* Absatzabstand ist eine Leerzeile, also genau ein Zeilenabstand. */
.ig-pub-prose p {
	margin: 0 0 1.2em;
}

.ig-pub-prose ul,
.ig-pub-prose ol {
	margin: 0 0 1.2em;
	padding-left: 1.4em;
}

.ig-pub-prose li {
	margin-bottom: 0.35em;
}

.ig-pub-prose figure {
	margin: 1.8em 0;
}

/* Bilder fuellen die Lesespalte - der Core-Block bringt sonst seine
   Originalbreite mit. */
.ig-pub-prose img {
	display: block;
	width: 100%;
	height: auto;
}

.ig-pub-prose figcaption {
	margin-top: 0.5em;
	font-size: var(--ig-pub-fs-small);
	color: var(--ig-pub-body);
}

/* --- Fussnoten ---
 *
 * Auf einer Kapitelseite gibt das Template nur die Noten aus, auf die dieses
 * Kapitel verweist - der Core-Block koennte das nicht, er kennt nur alle Noten
 * des Beitrags. Die Klasse des Core-Blocks steht trotzdem mit im Selektor:
 * Sobald jemand den Block im Editor von Hand setzt, sieht er gleich aus. */

.ig-pub-prose sup.fn a,
.ig-pub-prose .ig-pub-prose__notes a,
.ig-pub-prose .wp-block-footnotes a {
	color: var(--ig-pub-blue-1);
	text-decoration: none;
}

.ig-pub-prose__notes,
.ig-pub-prose .wp-block-footnotes {
	margin-top: var(--ig-pub-space-xl);
	padding-top: var(--ig-pub-space-m);
	padding-left: 1.4em;
	border-top: var(--ig-pub-border) solid rgba(0, 0, 0, 0.2);
	font-size: var(--ig-pub-fs-small);
}

.ig-pub-prose__notes li,
.ig-pub-prose .wp-block-footnotes li {
	margin-bottom: 0.5em;
}

/* "Naechstes Kapitel" laeuft ueber die ganze Inhaltsbreite, nicht nur ueber
   die Lesespalte - deshalb steht der Knopf ausserhalb von .ig-pub-prose. */
.ig-pub-detail__next {
	margin-top: var(--ig-pub-space-xl);
}

/* Angesprungene Fussnote hervorheben - man kommt aus dem Fliesstext und soll
   die Stelle sofort finden. Fuer Ueberschriften gilt das nicht mehr: Seit die
   Kapitelseiten ihre Ueberschrift anspringen, waere das keine Ausnahme mehr,
   sondern der Normalzustand jeder Kapitelseite. */
.ig-pub-prose li:target {
	background: rgba(153, 192, 51, 0.25);
}

/* ------------------------------------------------------------------ *
 * 6. View Transition
 * ------------------------------------------------------------------ */

@keyframes ig-pub-slide-up {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}

/* Wenn das Betriebssystem weniger Bewegung wuenscht, wird nur noch
   ein- und ausgeblendet. */
@media (prefers-reduced-motion: reduce) {
	.ig-pub__button,
	.ig-pub__chip,
	.ig-pub__icon--plus::after {
		transition: none;
	}
}

/* ------------------------------------------------------------------ *
 * 7. Ebene ueber der Website
 *
 * Das Archiv ist keine Seite innerhalb der Website, sondern liegt darueber:
 * eigenes Dokument ohne Theme-Header und -Navigation, mit Farbbalken,
 * Zurueck-Link und Partner:innen-Button.
 * ------------------------------------------------------------------ */

.ig-pub-layer-body {
	margin: 0;
	background: var(--ig-pub-bg, #f5f5f5);
}

.ig-pub-layer {
	--ig-pub-gutter: clamp(1rem, 0.4rem + 2.2vw, 1.75rem);

	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background: var(--ig-pub-bg);
	font-family: var(--ig-pub-font);
	color: var(--ig-pub-fg);
}

.ig-pub-layer__stripe {
	display: flex;
	height: 0.625rem;
	flex: 0 0 auto;
}

.ig-pub-layer__stripe-part {
	flex: 1 1 20%;
}
/* Der Farbbalken darf nicht von den brand_*-Klassen des Themes abhaengen:
   die Ebene laedt dessen Stylesheet nicht mit. */
.ig-pub-layer__stripe-part:nth-child(1),
.ig-pub-detail__stripe-part:nth-child(1) {
	background: var(--ig-pub-blue-1);
}

.ig-pub-layer__stripe-part:nth-child(2),
.ig-pub-detail__stripe-part:nth-child(2) {
	background: var(--ig-pub-blue-2);
}

.ig-pub-layer__stripe-part:nth-child(3),
.ig-pub-detail__stripe-part:nth-child(3) {
	background: var(--ig-pub-green-1);
}

.ig-pub-layer__stripe-part:nth-child(4),
.ig-pub-detail__stripe-part:nth-child(4) {
	background: var(--ig-pub-green-2);
}

.ig-pub-layer__stripe-part:nth-child(5),
.ig-pub-detail__stripe-part:nth-child(5) {
	background: var(--ig-pub-green-3);
}

/* Dieselbe Spalte wie der Inhalt darunter: gleiche Hoechstbreite, mittig,
   gleicher Seitenabstand. Ohne das lief die Leiste auf breiten Bildschirmen
   ueber die ganze Fensterbreite, waehrend der Inhalt bei 90rem stehenblieb -
   die Beschriftung im Pfeil stand dann weit links vom Titel. Einzig die
   Pfeilspitze tritt heraus, ueber den negativen Rand am Balken selbst. */
.ig-pub-layer__bar {
	flex: 0 0 auto;
	display: flex;
	align-items: stretch;
	gap: var(--ig-pub-space-s);
	width: 100%;
	max-width: 90rem;
	margin: 0 auto;
	padding: var(--ig-pub-space-m) var(--ig-pub-gutter) 0;
}

/* Der Zurueck-Balken laeuft spitz nach links zu - die Spitze zeigt zurueck
   zur Website. clip-path statt Grafik, damit er in jeder Breite sitzt. */
.ig-pub-layer__back {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	min-height: var(--ig-pub-head-h-back);
	/* Entwurf (Component 48): Die Beschriftung beginnt 39.67px hinter der
	   Spitze, bei 65px Balkenhoehe - also 0.61 der Hoehe. Weil sie zugleich
	   mit dem Text darunter fluchten soll ("ZURUECK" genau dort, wo
	   "PUBLIKATIONEN" beginnt), ist dieser Abstand zugleich der Ueberstand der
	   Spitze ueber die Inhaltskante.

	   Gedeckelt durch den Seitenabstand: Auf dem Handy ist der mit 16px
	   kleiner als die 0.61 Balkenhoehen, die Spitze ragte sonst aus dem
	   Fenster. Dort sitzt sie dann genau auf der Fensterkante. */
	--ig-pub-pfeil-innen: min(calc(var(--ig-pub-head-h-back) * 0.61), var(--ig-pub-gutter));
	--ig-pub-pfeil-versatz: var(--ig-pub-pfeil-innen);

	margin-left: calc(-1 * var(--ig-pub-pfeil-versatz));
	padding: 0.4em 1em 0.4em var(--ig-pub-pfeil-innen);
	background: var(--ig-pub-fg);
	color: var(--ig-pub-surface);
	text-decoration: none;
	/* Links die Spitze, rechts dieselbe Rundung wie der Partner:innen-Button.
	   Die Rundung entsteht aus border-radius; clip-path schneidet nur die
	   Spitze heraus und laesst die abgerundeten Ecken stehen. */
	border-radius: 0 var(--ig-pub-radius) var(--ig-pub-radius) 0;
	/* Der Anstieg misst ein Viertel der Balkenhoehe - nachgemessen am Entwurf:
	   dort 71px Anstieg auf 283px Hoehe. Das ergibt eine Spitze von rund 127
	   Grad. Vorher standen hier feste 1.6em, also 25.6px auf 48px Hoehe - eine
	   deutlich spitzere Form von rund 86 Grad.

	   Rueckfall fuer Browser ohne shape(): dieselbe Form mit scharfer Spitze. */
	clip-path: polygon(
		calc(var(--ig-pub-head-h-back) * 0.25) 0,
		100% 0,
		100% 100%,
		calc(var(--ig-pub-head-h-back) * 0.25) 100%,
		0 50%
	);
	transition: background-color 0.15s var(--ig-pub-ease), color 0.15s var(--ig-pub-ease);
}

/* Anders als die uebrigen schwarzen Knoepfe wird der Balken beim Hover nicht
   frei: Er hat keinen Rahmen, der die Form halten koennte, und bekommt auch
   keinen - clip-path schneidet die Spitze aus der gemalten Flaeche heraus, ein
   border wuerde entlang der beiden Schraegen mit weggeschnitten und der Pfeil
   vorne offen stehen. Stattdessen hellt die Flaeche auf: Die Form bleibt, die
   Schrift bleibt weiss, und die Zustandsaenderung ist trotzdem deutlich. */
/* Alle drei Ecken des Pfeils werden gerundet wie jede andere Ecke im Archiv.
 * polygon() kann das nicht - es kennt nur gerade Kanten -, shape() schon.
 *
 * Die Beruehrpunkte der Kreise mussten ausgerechnet werden. Bei einem Anstieg
 * von einem Viertel der Hoehe steht jede Schraege im Winkel atan(2) = 63.43
 * Grad zur Mittelachse. Daraus folgen zwei Ecktypen:
 *
 *   Spitze, Winkel 126.87 Grad: Tangentenlaenge 0.5 r
 *     -> x = 0.2236 r, y = 0.4472 r ueber bzw. unter der Mitte
 *   Knick oben und unten, Winkel 116.57 Grad: Tangentenlaenge 0.618 r
 *     -> auf der Waagrechten 0.618 r, auf der Schraegen
 *        0.2764 r nach innen und 0.5528 r nach unten bzw. oben
 *
 * Die Faktoren haengen nur am Verhaeltnis Anstieg zu Hoehe, nicht an der
 * Hoehe selbst - sie gelten also in jeder Fenstergroesse. */
@supports (clip-path: shape(from 0 0, line to 100% 0, close)) {
	.ig-pub-layer__back {
		--ig-pub-pfeil-x: calc(var(--ig-pub-head-h-back) * 0.25);
		--ig-pub-pfeil-r: var(--ig-pub-radius);

		clip-path: shape(
			from calc(var(--ig-pub-pfeil-x) + var(--ig-pub-pfeil-r) * 0.618) 0,
			line to 100% 0,
			line to 100% 100%,
			line to calc(var(--ig-pub-pfeil-x) + var(--ig-pub-pfeil-r) * 0.618) 100%,
			arc to calc(var(--ig-pub-pfeil-x) - var(--ig-pub-pfeil-r) * 0.2764)
				calc(100% - var(--ig-pub-pfeil-r) * 0.5528) of var(--ig-pub-pfeil-r) cw,
			line to calc(var(--ig-pub-pfeil-r) * 0.2236) calc(50% + var(--ig-pub-pfeil-r) * 0.4472),
			arc to calc(var(--ig-pub-pfeil-r) * 0.2236) calc(50% - var(--ig-pub-pfeil-r) * 0.4472)
				of var(--ig-pub-pfeil-r) cw,
			line to calc(var(--ig-pub-pfeil-x) - var(--ig-pub-pfeil-r) * 0.2764)
				calc(var(--ig-pub-pfeil-r) * 0.5528),
			arc to calc(var(--ig-pub-pfeil-x) + var(--ig-pub-pfeil-r) * 0.618) 0
				of var(--ig-pub-pfeil-r) cw,
			close
		);
	}
}

.ig-pub-layer__back:hover,
.ig-pub-layer__back:focus-visible {
	background: var(--ig-pub-body);
	color: var(--ig-pub-surface);
}

.ig-pub-layer__back-text {
	font-size: var(--ig-pub-head-fs-back);
	font-weight: 600;
	line-height: 1.1;
	text-transform: uppercase;
}

/* Der Link steht zweimal im Markup - hier die Fassung in der Zurueck-Leiste,
   am Telefon uebernimmt die Fassung im Fluss (siehe archive-shell.php). */
.ig-pub-layer__partner--fluss {
	display: none;
}

.ig-pub-layer__partner {
	flex: 0 0 auto;
	/* Rutscht der Knopf in schmalen Fenstern unter den Zurueck-Balken, soll er
	   dort ebenfalls rechts stehen - genau wie die Knoepfe in der Kopfzeile
	   der Publikation. In einer Zeile aendert margin nichts, weil der Balken
	   daneben ohnehin den Platz einnimmt. */
	margin-left: auto;
	min-height: var(--ig-pub-head-h-back);
	font-size: var(--ig-pub-fs-lead);
	text-transform: none;
}

.ig-pub-layer__main {
	flex: 1 1 auto;
	width: 100%;
	max-width: 90rem;
	margin: 0 auto;
	padding: 0 var(--ig-pub-gutter);
}

.ig-pub-layer__main--bare {
	max-width: none;
	padding: 0;
	display: flex;
}

.ig-pub-layer__main--bare .ig-pub-detail {
	flex: 1 1 auto;
	/* Ohne min-width waechst das Flex-Element auf die Inhaltsbreite seines
	   breitesten Kindes - in schmalen Fenstern zieht die Kopfzeile die ganze
	   Seite ueber den Bildrand hinaus. */
	min-width: 0;
	min-height: 100vh;
	min-height: 100dvh;
}

.ig-pub-layer__intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--ig-pub-space-l);
	align-items: start;
	padding: var(--ig-pub-space-l) 0 var(--ig-pub-space-m);
}

/* Der Einleitungstext rutscht schon bei 64em unter den Titel. Nebeneinander
   bleiben beide Spalten sonst zu schmal: Der Titel bricht in kurze Stuecke,
   und der Text steht in einer Spalte, die kaum mehr als vier Woerter fasst. */
@media (max-width: 64em) {
	.ig-pub-layer__intro {
		grid-template-columns: 1fr;
		gap: var(--ig-pub-space-m);
	}
}

/* Aufgeklappt auf dem Telefon: Ab der zweiten Zeile laufen die Schlagworte
 * auch unter dem "+"-Knopf durch - der Platz rechts ist dort zu knapp, um ihn
 * ueber alle Zeilen freizuhalten.
 *
 * Das geht mit Flexbox nicht: Dort nimmt der Knopf Breite in jeder Zeile weg.
 * Deshalb wird die Filterzeile in diesem einen Zustand ein normaler Block,
 * Beschriftung und Knopf werden zu Floats, und die Schlagworte werden zu
 * Inline-Elementen. Zeilenkaesten umfliessen Floats: Die erste Zeile laeuft
 * zwischen beiden, alle weiteren darunter ueber die volle Breite. Damit
 * entfaellt hier auch der gemessene Platzhalter am Zeilenanfang.
 *
 * font-size: 0 an der Liste schluckt die Leerzeichen zwischen den
 * Listenpunkten - die Abstaende macht der margin, nicht der Wortzwischenraum.
 */
@media (max-width: 48em) {
	.ig-pub__filter:has(.ig-pub__chips.is-expanded) {
		display: block;
	}

	.ig-pub__filter:has(.ig-pub__chips.is-expanded) .ig-pub__filter-legend {
		float: left;
	}

	.ig-pub__filter:has(.ig-pub__chips.is-expanded) .ig-pub__chips-toggle {
		float: right;
	}

	.ig-pub__chips.is-expanded {
		display: block;
		margin-left: 0;
		font-size: 0;
	}

	.ig-pub__chips.is-expanded::before {
		display: none;
	}

	.ig-pub__chips.is-expanded .ig-pub__chip-item {
		display: inline-block;
		margin: 0 var(--ig-pub-space-xs) var(--ig-pub-space-xs) 0;
		vertical-align: top;
	}

	/* Flacher nur am Telefon - am Desktop bleiben die 51px des Entwurfs. */
	.ig-pub-item__toggle {
		--ig-pub-toggle-h: 1.7em;
	}

	/* Kopfzeile der Publikation: untereinander statt umgebrochen, und die
	   Knoepfe stehen oben. Sie sind die Handlungen, die Reiter darunter der
	   Ort, an dem man gerade ist. */
	.ig-pub-detail__bar-inner {
		flex-direction: column;
		align-items: stretch;
	}

	.ig-pub-detail__bar-actions {
		order: -1;
		margin-left: 0;
	}

	/* Beide Zeilen fuellen die Breite: Die Elemente teilen sie sich zu
	   gleichen Teilen. Das Schliessen-Kreuz behaelt seine quadratische Form -
	   auf die Breite gezogen wuerde aus dem Zeichen ein Balken. */
	.ig-pub-detail__tabs {
		gap: var(--ig-pub-head-gap-s);
	}

	/* width: 100% statt sich auf align-items: stretch zu verlassen - beide
	   Zeilen sind selbst Flex-Container, und der Browser gibt ihnen quer zur
	   Richtung sonst ihre Inhaltsbreite, nicht die des Elternelements. Die
	   Kopfzeile stand damit ueber den Bildrand hinaus. */
	.ig-pub-detail__bar-actions,
	.ig-pub-detail__tabs {
		width: 100%;
		min-width: 0;
	}

	.ig-pub-detail__bar-actions {
		flex-wrap: nowrap;
	}

	/* Die Knoepfe der Kopfzeile stecken in <details>-Aufklappern - das
	   Flex-Element ist also das <details>, nicht der Knopf darin. Die
	   Verteilung muss deshalb dort ansetzen, der Knopf fuellt sie dann aus.
	   min-width: 0, damit sie unter ihre Inhaltsbreite schrumpfen koennen -
	   sonst passte "Inhaltsverzeichnis" nicht neben Downloads und dem Kreuz.
	   Die Beschriftung darf dafuer zweizeilig werden. */
	.ig-pub-detail__bar-actions > .ig-pub__pop {
		flex: 1 1 0;
		min-width: 0;
	}

	.ig-pub-detail__bar-actions .ig-pub-detail__bar-button {
		width: 100%;
		/* "Inhaltsverzeichnis" ist ein Wort und passt nicht in die geteilte
		   Breite - mit Silbentrennung bricht es sauber um. */
		hyphens: auto;
		-webkit-hyphens: auto;
	}

	/* Die Reiter wachsen aus ihrer Textbreite heraus, statt sich die Breite
	   zu gleichen Teilen zu nehmen: "Kernergebnisse" ist ein Wort und passte
	   sonst nicht in sein Drittel - es muesste getrennt werden, und ein
	   getrennter Reiter liest sich schlecht. So fuellen sie die Zeile
	   trotzdem, nur eben unterschiedlich breit. */
	.ig-pub-detail__tab {
		flex: 1 1 auto;
		text-align: center;
	}

	.ig-pub-layer__bar {
		flex-wrap: wrap;
	}

	/* Auf dem Telefon nur der halbe Ueberstand: Der Seitenabstand betraegt
	   dort nur 16px, mit dem vollen Mass des Entwurfs sass die Spitze direkt
	   auf der Fensterkante und wirkte angeschnitten.

	   Damit fluchten Beschriftung und Titel hier nicht mehr - dafuer waere der
	   ganze Ueberstand noetig. Die Polsterung richtet sich deshalb nach der
	   Schraege statt nach dem Entwurfsmass: Anstieg plus ein kleiner Abstand,
	   damit die Schrift nicht an der Kante klebt. Weil sie den halben
	   Ueberstand nicht ausgleicht, rueckt die Schrift mit dem Balken nach
	   links. */
	.ig-pub-layer__back {
		--ig-pub-pfeil-versatz: calc(var(--ig-pub-gutter) / 2);
		--ig-pub-pfeil-innen: calc(var(--ig-pub-head-h-back) * 0.25 + var(--ig-pub-space-s));
		/* Ohne min-width waechst das Flex-Element auf die Textbreite und der
		   Balken schoebe die Zeile auf; erst so darf der Text schrumpfen. */
		min-width: 0;
	}

	/* Einzeilig mit Auslassungspunkten: Umgebrochen waere der Balken doppelt
	   so hoch wie der Pfeil daneben, und die Spitze saesse nicht mehr auf
	   halber Hoehe der Schrift. */
	.ig-pub-layer__back-text {
		min-width: 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* Partner:innen wandert aus der Leiste zwischen Einleitung und Archiv und
	   nimmt dort die ganze Breite ein. */
	.ig-pub-layer__partner--leiste {
		display: none;
	}

	/* Der letzte Absatz der Einleitung traegt seinen Abstand nach unten mit.
	   Vor einem Knopf ist das kein Absatzabstand mehr, sondern eine Luecke -
	   der Abstand kommt hier vom Knopf selbst. */
	.ig-pub-layer__lead p:last-child {
		margin-bottom: 0;
	}

	.ig-pub-layer__partner--fluss {
		display: flex;
		width: 100%;
		/* Gleich viel Luft nach oben wie nach unten: Oben kommen die 20px
		   Innenabstand der Einleitung dazu, zusammen also ebenfalls 32px.
		   Unten muss der Abstand ganz vom Knopf kommen - das Archiv beginnt
		   innerhalb der Ebene ohne eigenen Innenabstand. */
		margin: var(--ig-pub-space-s) 0 var(--ig-pub-space-l);
	}
}

.ig-pub-layer__title {
	margin: 0;
	font-size: var(--ig-pub-fs-display);
	font-weight: 600;
	line-height: 0.95;
	text-transform: uppercase;
}

.ig-pub-layer__lead p {
	margin: 0 0 0.8em;
	font-size: var(--ig-pub-fs-lead);
	font-weight: 600;
	line-height: 1.3;
}

/* Innerhalb der Ebene bringt .ig-pub keinen eigenen Hintergrund mehr mit. */
.ig-pub-layer .ig-pub {
	padding-top: 0;
	background: transparent;
}

/* ------------------------------------------------------------------ *
 * 8. Uebergang von der Website auf die Ebene
 *
 * Cross-Document View Transition: beide Dokumente melden sich an, dann faehrt
 * die Ebene von unten ueber die Website. Browser ohne Unterstuetzung laden
 * die Seite wie gewohnt.
 * ------------------------------------------------------------------ */

@view-transition {
	navigation: auto;
}

.ig-pub-layer {
	view-transition-name: ig-pub-layer;
}

::view-transition-new(ig-pub-layer) {
	animation: ig-pub-slide-up 0.5s var(--ig-pub-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

/* Die alte Ebene bleibt stehen - die neue legt sich darueber. Wuerde sie
   mitfahren, bewegten sich beim Wechsel zwischen zwei Publikationsseiten
   zwei Ebenen gleichzeitig. */
::view-transition-old(ig-pub-layer) {
	animation: none;
}

/* --- Wechsel zwischen Full Version, Summary und Kernergebnissen ---
 *
 * Hier faehrt nichts von unten auf: Der Inhalt blendet ueber, und in der
 * Reiterzeile wandert nur der dicke Strich unter die neue Ansicht.
 *
 * Wichtig ist die Schreibweise ohne Leerzeichen: ::view-transition-old() und
 * Geschwister haengen direkt am Wurzelelement. "html[...] ::view-transition-"
 * mit Nachfahrenkombinator trifft nichts - dann bliebe es beim Auffahren von
 * unten.
 *
 * Das Attribut setzt ansichtswechsel.js, auf beiden Seiten des Wechsels. */
html[data-ig-pub-ansichtswechsel]::view-transition-old(ig-pub-layer) {
	animation: ig-pub-aus 0.3s var(--ig-pub-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
	/* Wie die Voreinstellung fuer Ueberblendungen: Beide Abbilder addieren
	   sich, statt sich zu verdecken. Weil beide Kurven dieselben sind, ergeben
	   ihre Deckkraefte zu jedem Zeitpunkt zusammen 1 - die Teile, die in beiden
	   Ansichten gleich aussehen, stehen dadurch voellig ruhig. */
	mix-blend-mode: plus-lighter;
}

html[data-ig-pub-ansichtswechsel]::view-transition-new(ig-pub-layer) {
	animation: ig-pub-ein 0.3s var(--ig-pub-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
	mix-blend-mode: plus-lighter;
}

/* Der Strich bekommt einen eigenen Namen und wird damit aus dem Abbild der
   Ebene herausgehoben. Seine Gruppe wandert dann von der alten Position und
   Breite zur neuen - das ist die ganze Bewegung. */
html[data-ig-pub-ansichtswechsel] .ig-pub-detail__tab-line {
	view-transition-name: ig-pub-reiter-strich;
}

html[data-ig-pub-ansichtswechsel]::view-transition-group(ig-pub-reiter-strich) {
	animation-duration: 0.35s;
	animation-timing-function: var(--ig-pub-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

/* Nicht ueberblenden: Beide Abbilder sind dieselbe schwarze Flaeche, eine
   Ueberblendung liesse sie in der Mitte nur aufhellen.

   block-size: 100% statt der Voreinstellung auto: Sonst behaelt das Abbild
   sein Seitenverhaeltnis, und weil die Breite der Gruppe waehrend der
   Bewegung waechst, wuerde der Strich unterwegs genauso dicker. Als
   rechteckige Flaeche darf er stattdessen einfach die Gruppe ausfuellen -
   deren Hoehe ist in beiden Ansichten dieselbe, die Dicke bleibt damit
   konstant. */
html[data-ig-pub-ansichtswechsel]::view-transition-old(ig-pub-reiter-strich),
html[data-ig-pub-ansichtswechsel]::view-transition-new(ig-pub-reiter-strich) {
	animation: none;
	block-size: 100%;
	object-fit: fill;
}

@keyframes ig-pub-aus {
	to {
		opacity: 0;
	}
}

@keyframes ig-pub-ein {
	from {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-new(ig-pub-layer),
	::view-transition-old(ig-pub-layer),
	::view-transition-new(ig-pub-reiter-strich),
	::view-transition-old(ig-pub-reiter-strich),
	::view-transition-group(ig-pub-reiter-strich) {
		animation-name: none;
		animation-duration: 0.01s;
	}
}