/* Charaktervorstellung */
.md-intro {
	container-type: inline-size;
	position: relative;
	max-width: 760px;
	margin: 1rem auto;
	padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 5vw, 3.25rem);
	background: var(--md-wash);
	font-family: var(--md-f-sans);
	font-size: var(--md-t-body);
	line-height: 1.75;
	letter-spacing: var(--md-ls-body);
	color: var(--md-ink-dim);
	text-align: left;
}

/* Der Parser setzt für jeden Umbruch im Code ein <br />. Im Gerüst stört
   das, nur im Fließtext sind Umbrüche gewollt. */
.md-intro br { display: none; }
.md-intro .md-intro__prose br { display: inline; }

/* Rahmen mit eingezogenen Ecken, wie Banner und Profil. */
.md-intro::before,
.md-intro::after { content: ""; position: absolute; pointer-events: none; }
.md-intro::before {
	left: var(--md-r); right: var(--md-r); top: 0; bottom: 0;
	border-top: 1px solid var(--md-rule-soft);
	border-bottom: 1px solid var(--md-rule-soft);
}
.md-intro::after {
	top: var(--md-r); bottom: var(--md-r); left: 0; right: 0;
	border-left: 1px solid var(--md-rule-soft);
	border-right: 1px solid var(--md-rule-soft);
}
.md-intro .md-intro__c {
	position: absolute;
	width: var(--md-r); height: var(--md-r);
	border: 0 solid var(--md-rule-soft);
	pointer-events: none;
}
.md-intro .md-intro__c--tl { top: 0; left: 0; border-radius: 0 0 100% 0; border-right-width: 1px; border-bottom-width: 1px; }
.md-intro .md-intro__c--tr { top: 0; right: 0; border-radius: 0 0 0 100%; border-left-width: 1px; border-bottom-width: 1px; }
.md-intro .md-intro__c--br { bottom: 0; right: 0; border-radius: 100% 0 0 0; border-left-width: 1px; border-top-width: 1px; }
.md-intro .md-intro__c--bl { bottom: 0; left: 0; border-radius: 0 100% 0 0; border-right-width: 1px; border-top-width: 1px; }

/* Kopf */
.md-intro .md-intro__kicker {
	margin: 0;
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-kicker);
	text-indent: var(--md-ls-kicker);
	text-transform: lowercase;
	text-align: center;
	color: var(--md-ink-dim);
}
.md-intro .md-intro__name {
	margin: .6rem 0 0;
	font-family: var(--md-f-display);
	font-weight: 400;
	font-size: clamp(2rem, 9cqi, 3.4rem);
	line-height: 1.05;
	letter-spacing: var(--md-ls-display);
	text-align: center;
	text-transform: uppercase;
	color: var(--md-ink-bright);
}
.md-intro .md-intro__name em {
	display: block;
	margin: .25rem 0 .2rem;
	font-family: var(--md-f-serif);
	font-size: .42em;
	font-style: italic;
	letter-spacing: .04em;
	text-transform: none;
	color: var(--md-accent-soft);
}
.md-intro .md-intro__motto {
	max-width: 46ch;
	margin: 1rem auto 0;
	font-family: var(--md-f-serif);
	font-style: italic;
	font-size: clamp(.95rem, 2.4cqi, 1.1rem);
	line-height: 1.8;
	text-align: center;
	color: var(--md-ink);
}

/* Trennlinie mit Raute in der Mitte. */
.md-intro .md-intro__rule {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: clamp(1.4rem, 4cqi, 2rem) auto;
	max-width: 70%;
}
.md-intro .md-intro__rule::before,
.md-intro .md-intro__rule::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--md-rule-soft); }
.md-intro .md-intro__rule span {
	flex: 0 0 auto;
	width: 7px; height: 7px;
	border: 1px solid var(--md-accent-soft);
	transform: rotate(45deg);
}

/* Bild und Eckdaten */
.md-intro .md-intro__top {
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
	gap: clamp(1.25rem, 5cqi, 2.5rem);
	align-items: start;
}
.md-intro .md-intro__photo {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	background: var(--md-chip-bg);
	outline: 1px solid var(--md-rule-hair);
	outline-offset: 6px;
}
.md-intro .md-intro__photo img {
	display: block;
	width: 100%; height: 100%;
	object-fit: cover;
	filter: var(--md-photo-filter);
}
.md-intro .md-intro__facts { margin: 0; }
.md-intro .md-intro__facts div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: .55rem 0;
	border-top: 1px solid var(--md-rule-hair);
}
.md-intro .md-intro__facts div:first-child { border-top: 0; padding-top: 0; }
.md-intro .md-intro__facts dt {
	flex: 0 0 auto;
	font-size: var(--md-t-micro);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}
.md-intro .md-intro__facts dd {
	margin: 0;
	min-width: 0;
	text-align: right;
	color: var(--md-ink);
}

/* Abschnitte */
.md-intro .md-intro__sec { margin-top: clamp(1.75rem, 5cqi, 2.5rem); }
.md-intro .md-intro__head {
	display: flex;
	align-items: center;
	gap: .9rem;
	margin: 0 0 .9rem;
	font-family: var(--md-f-serif);
	font-weight: 700;
	font-size: var(--md-t-head);
	letter-spacing: var(--md-ls-head);
	text-transform: uppercase;
	color: var(--md-ink);
}
.md-intro .md-intro__head::before { content: ""; flex: 0 0 var(--md-dash); height: 1px; background: var(--md-accent-soft); }
.md-intro .md-intro__head::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--md-rule-hair); }
.md-intro .md-intro__prose { color: var(--md-ink-dim); }
.md-intro .md-intro__prose b,
.md-intro .md-intro__prose strong { font-weight: 500; color: var(--md-ink); }
.md-intro .md-intro__prose a { color: var(--md-ink); text-decoration: none; border-bottom: 1px solid var(--md-rule-soft); }
.md-intro .md-intro__prose a:hover { color: var(--md-ink-bright); border-bottom-color: var(--md-accent-soft); }

/* Fuß */
.md-intro .md-intro__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .4rem 1.5rem;
	margin: clamp(1.75rem, 5cqi, 2.5rem) 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--md-rule-hair);
	font-size: var(--md-t-micro);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}
.md-intro .md-intro__foot b { font-weight: 400; color: var(--md-ink); }

@container (max-width: 34rem) {
	.md-intro .md-intro__top { grid-template-columns: minmax(0, 1fr); }
	.md-intro .md-intro__photo { width: min(15rem, 100%); margin: 0 auto; }
}

/* Mitteilungen: Support-Themen und Forennews */
.md-memo {
	container-type: inline-size;
	position: relative;
	max-width: 760px;
	margin: 1rem auto;
	padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 5vw, 3.25rem);
	overflow: hidden;
	background: var(--md-wash);
	font-family: var(--md-f-sans);
	font-size: var(--md-t-body);
	line-height: 1.8;
	letter-spacing: var(--md-ls-body);
	color: var(--md-ink-dim);
	text-align: left;
}
.md-memo br { display: none; }
.md-memo .md-memo__prose br,
.md-memo .md-memo__lede br { display: inline; }

.md-memo::before,
.md-memo::after { content: ""; position: absolute; pointer-events: none; }
.md-memo::before {
	left: var(--md-r); right: var(--md-r); top: 0; bottom: 0;
	border-top: 1px solid var(--md-rule-soft);
	border-bottom: 1px solid var(--md-rule-soft);
}
.md-memo::after {
	top: var(--md-r); bottom: var(--md-r); left: 0; right: 0;
	border-left: 1px solid var(--md-rule-soft);
	border-right: 1px solid var(--md-rule-soft);
}
.md-memo .md-memo__c {
	position: absolute;
	width: var(--md-r); height: var(--md-r);
	border: 0 solid var(--md-rule-soft);
	pointer-events: none;
}
.md-memo .md-memo__c--tl { top: 0; left: 0; border-radius: 0 0 100% 0; border-right-width: 1px; border-bottom-width: 1px; }
.md-memo .md-memo__c--tr { top: 0; right: 0; border-radius: 0 0 0 100%; border-left-width: 1px; border-bottom-width: 1px; }
.md-memo .md-memo__c--br { bottom: 0; right: 0; border-radius: 100% 0 0 0; border-left-width: 1px; border-top-width: 1px; }
.md-memo .md-memo__c--bl { bottom: 0; left: 0; border-radius: 0 100% 0 0; border-right-width: 1px; border-top-width: 1px; }

/* Wasserzeichen: ein Wort als Umriss oben rechts, liegt hinter dem Text. */
.md-memo .md-memo__mark {
	position: absolute;
	top: clamp(.6rem, 2cqi, 1.2rem);
	right: clamp(1.2rem, 4cqi, 2.4rem);
	z-index: 0;
	margin: 0;
	font-family: var(--md-f-display);
	font-size: clamp(3.5rem, 15cqi, 6.5rem);
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: 1px var(--md-rule-soft);
	opacity: .55;
	pointer-events: none;
	user-select: none;
}
.md-memo > *:not(.md-memo__mark):not(.md-memo__c) { position: relative; z-index: 1; }

/* Kopfzeile: Rubrik links, Schlagwort oder Datum rechts */
.md-memo .md-memo__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .4rem 1.5rem;
	padding-bottom: .9rem;
	border-bottom: 1px solid var(--md-rule-hair);
}
.md-memo .md-memo__kicker {
	display: flex;
	align-items: center;
	gap: .8rem;
	margin: 0;
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-kicker);
	text-transform: uppercase;
	color: var(--md-accent-soft);
}
.md-memo .md-memo__kicker::before { content: ""; flex: 0 0 var(--md-dash); height: 1px; background: currentColor; }
.md-memo .md-memo__tag {
	margin: 0;
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
	font-variant-numeric: tabular-nums;
}

.md-memo .md-memo__title {
	margin: clamp(1.1rem, 3cqi, 1.6rem) 0 0;
	font-family: var(--md-f-display);
	font-weight: 400;
	font-size: clamp(1.9rem, 7.5cqi, 3rem);
	line-height: 1.05;
	letter-spacing: var(--md-ls-display);
	text-transform: uppercase;
	color: var(--md-ink-bright);
}
.md-memo .md-memo__lede {
	max-width: 58ch;
	margin: .9rem 0 0;
	font-family: var(--md-f-serif);
	font-style: italic;
	font-size: clamp(.95rem, 2.4cqi, 1.08rem);
	line-height: 1.75;
	color: var(--md-ink);
}

.md-memo .md-memo__sec { margin-top: clamp(1.5rem, 4.5cqi, 2.2rem); }
.md-memo > .md-memo__prose { margin-top: 1.1rem; }
.md-memo .md-memo__head {
	display: flex;
	align-items: center;
	gap: .9rem;
	margin: 0 0 .8rem;
	font-family: var(--md-f-serif);
	font-weight: 700;
	font-size: var(--md-t-head);
	letter-spacing: var(--md-ls-head);
	text-transform: uppercase;
	color: var(--md-ink);
}
.md-memo .md-memo__head::before { content: ""; flex: 0 0 var(--md-dash); height: 1px; background: var(--md-accent-soft); }
.md-memo .md-memo__head::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--md-rule-hair); }
.md-memo .md-memo__prose { color: var(--md-ink-dim); }
.md-memo .md-memo__prose b,
.md-memo .md-memo__prose strong { font-weight: 500; color: var(--md-ink); }
.md-memo .md-memo__prose a { color: var(--md-ink); text-decoration: none; border-bottom: 1px solid var(--md-accent-soft); }
.md-memo .md-memo__prose a:hover { color: var(--md-ink-bright); border-bottom-color: var(--md-accent); }

.md-memo .md-memo__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .4rem 1.5rem;
	margin: clamp(1.6rem, 4.5cqi, 2.4rem) 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--md-rule-hair);
	font-size: var(--md-t-micro);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}
.md-memo .md-memo__foot b { font-weight: 400; color: var(--md-ink); }