/**
 * DRK Boxen — Download-Button und Kontaktdaten
 *
 * Aufbau:
 *   1. Gemeinsame Tokens (:root)
 *   2. Download-Button (.dl-btn)
 *   3. Kontaktdaten (.drk-contact)
 *
 * Beide Boxen lesen dieselben Variablen. Wird ein Wert in Block 1 geaendert,
 * ziehen beide Boxen nach.
 */

:root {
	/* Rahmen und Fläche */
	--drk-box-surface: var(--weiss, #ffffff);
	--drk-box-surface-hover: var(--hellgrau, #efeeea);
	--drk-box-border-color: var(--softrot, #e46450);
	--drk-box-border-width: 1px;
	--drk-box-radius: 1rem;
	--drk-box-padding: 1rem;
	--drk-box-gap: 1rem;
	--drk-box-min-width: 16rem;

	/* Kachel links */
	--drk-box-tile-size: 2rem;
	--drk-box-tile-radius: 0.5rem;
	--drk-box-tile-bg: var(--drk-rot, #e60005);
	--drk-box-tile-color: var(--weiss, #ffffff);

	/* Typografie */
	--drk-box-title-size: 1.25rem;
	--drk-box-title-weight: 600;
	--drk-box-title-leading: 1.2;
	--drk-box-meta-size: 0.8rem;

	/* Farben */
	--drk-box-text: var(--dunkelgrau, #554f4a);
	--drk-box-meta: #888780; /* nicht in der Palette enthalten, siehe readme */
	--drk-box-link: var(--dunkelrot, #a51e0f);
	--drk-box-link-hover: var(--drk-rot, #e60005);
}

/* --- 2. Download-Button ------------------------------------------- */

.dl-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--drk-box-gap, 1rem);
  padding: var(--drk-box-padding, 1rem);
  background: var(--drk-box-surface, #ffffff);
  border: var(--drk-box-border-width, 1px) solid var(--drk-box-border-color, #e46450);
  border-radius: var(--drk-box-radius, 1rem);
  text-decoration: none;
  font-size: 1rem;
  color: var(--drk-box-text, #554f4a);
  min-width: var(--drk-box-min-width, 16rem);
  transition: background 0.15s, transform 0.1s;
  margin: 0;
}

.dl-btn:hover {
  background: var(--drk-box-surface-hover, #efeeea);
}

.dl-icon {
  width: var(--drk-box-tile-size, 2rem);
  height: var(--drk-box-tile-size, 2rem);
  border-radius: var(--drk-box-tile-radius, 0.5rem);
  background: var(--drk-box-tile-bg, #e60005);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--drk-box-tile-color, #ffffff);
}

.dl-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.dl-name {
  font-size: var(--drk-box-title-size, 1rem);
  font-weight: var(--drk-box-title-weight, 600);
  line-height: var(--drk-box-title-leading, 1.2);
  color: inherit;
}

.dl-meta {
  font-size: var(--drk-box-meta-size, 0.8rem);
  color: var(--drk-box-meta, #888780);
  margin-top: 2px;
}

.dl-action {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--drk-box-meta-size, 0.8rem);
  color: var(--drk-box-text, #554f4a);
  flex-shrink: 0;
}

/* Fokus sichtbar machen — der gesamte Kasten ist ein Link */
.dl-btn:focus-visible {
  outline: 2px solid var(--drk-box-link-hover, #e60005);
  outline-offset: 2px;
}

/* --- 3. Kontaktdaten ---------------------------------------------- */

.drk-contact {
	display: inline-flex;
	align-items: flex-start;
	gap: var(--drk-box-gap, 1rem);
	max-width: 100%;
	min-width: var(--drk-contact-min-width, var(--drk-box-min-width, 16rem));
	color: var(--drk-box-text, #554f4a);
	font-size: 1rem;
	line-height: 1.5;
}

.drk-contact--full {
	display: flex;
	width: 100%;
}

.drk-contact--framed {
	background-color: var(--drk-contact-surface, var(--drk-box-surface, #ffffff));
	border: var(--drk-box-border-width, 1px) solid var(--drk-contact-border, var(--drk-box-border-color, #e46450));
	border-radius: var(--drk-box-radius, 1rem);
	padding: var(--drk-box-padding, 1rem);
}

.drk-contact--compact {
	align-items: center;
}

.drk-contact--centered {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Kachel links — Maße und Radius wie .dl-icon */

.drk-contact__media {
	flex: 0 0 auto;
	width: var(--drk-contact-media-size, 4rem);
	height: var(--drk-contact-media-size, 4rem);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: var(--drk-box-tile-radius, 0.5rem);
	background-color: var(--drk-contact-media-bg, var(--drk-box-surface-hover, #efeeea));
	color: var(--drk-box-text, #554f4a);
}

/* Nur Icon, kein Bild und keine Initialen: exakt die Download-Kachel */
.drk-contact--icon-only .drk-contact__media {
	width: var(--drk-contact-media-size, var(--drk-box-tile-size, 2rem));
	height: var(--drk-contact-media-size, var(--drk-box-tile-size, 2rem));
	background-color: var(--drk-contact-media-bg, var(--drk-box-tile-bg, #e60005));
	color: var(--drk-box-tile-color, #ffffff);
}

.drk-contact--compact .drk-contact__media {
	width: var(--drk-contact-media-size, 2.5rem);
	height: var(--drk-contact-media-size, 2.5rem);
}

.drk-contact--centered .drk-contact__media {
	width: var(--drk-contact-media-size, 6rem);
	height: var(--drk-contact-media-size, 6rem);
}

.drk-contact--media-round .drk-contact__media {
	border-radius: 50%;
}

.drk-contact--media-square .drk-contact__media {
	border-radius: 0;
}

.drk-contact__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.drk-contact__initials {
	font-size: calc(var(--drk-contact-media-size, 4rem) * 0.3);
	font-weight: var(--drk-box-title-weight, 600);
	line-height: 1;
	letter-spacing: 0.02em;
}

.drk-contact__placeholder {
	display: flex;
}

.drk-contact__placeholder .drk-contact__icon {
	width: 1rem;
	height: 1rem;
	margin: 0;
	color: inherit;
}

/* Text — Größen wie .dl-name und .dl-meta */

.drk-contact__body {
	min-width: 0;
	flex: 1 1 auto;
}

.drk-contact__name {
	margin: 0;
	font-size: var(--drk-box-title-size, 1rem);
	font-weight: var(--drk-box-title-weight, 600);
	line-height: var(--drk-box-title-leading, 1.2);
	color: inherit;
}

.drk-contact__role {
	margin: 2px 0 0;
	font-size: var(--drk-box-meta-size, 0.8rem);
	color: var(--drk-box-meta, #888780);
}

.drk-contact__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.drk-contact__name + .drk-contact__list,
.drk-contact__role + .drk-contact__list {
	margin-top: 0.5rem;
}

.drk-contact__row {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0;
	font-size: 1rem;
}

.drk-contact__row + .drk-contact__row {
	margin-top: 0.25rem;
}

.drk-contact--centered .drk-contact__row {
	justify-content: center;
}

.drk-contact__icon {
	flex: 0 0 auto;
	width: 1.125em;
	height: 1.125em;
	margin-top: 0.2em;
	color: var(--drk-box-meta, #888780);
}

.drk-contact__value {
	min-width: 0;
	word-break: break-word;
}

.drk-contact__address {
	font-style: normal;
}

.drk-contact__link {
	color: var(--drk-contact-accent, var(--drk-box-link, #a51e0f));
	text-decoration: none;
}

.drk-contact__link:hover,
.drk-contact__link:focus-visible {
	color: var(--drk-box-link-hover, #e60005);
	text-decoration: underline;
}

.drk-contact__link:focus-visible {
	outline: 2px solid var(--drk-box-link-hover, #e60005);
	outline-offset: 2px;
	border-radius: 2px;
}

@media (max-width: 479px) {
	.drk-contact--card {
		flex-direction: column;
	}
}