/* Transkriptsuche (/suche/) – Design Haken dran: Glas-Karten wie die Linkliste, Mint als Akzent,
   Treffer als <mark> in Mint mit dunkler Schrift. Schrift kommt vom Theme (Source Sans 3). */

.hds {
	--hds-mint: var(--wp--preset--color--bright-teal, #06d6a0);
	--hds-glass: var(--hd-glass-bg, rgba(255, 255, 255, .06));
	--hds-glass-hover: var(--hd-glass-bg-hover, rgba(255, 255, 255, .1));
	--hds-line: var(--hd-glass-border, rgba(255, 255, 255, .14));
	--hds-muted: color-mix(in srgb, currentColor 72%, transparent);
	max-width: 820px; margin: 0 auto;
}
:where(body.hd-gradient-bg) .hds {
	--hds-glass: rgba(9, 30, 46, .34);
	--hds-glass-hover: rgba(9, 30, 46, .5);
	--hds-line: rgba(255, 255, 255, .16);
}
.hds *, .hds *::before, .hds *::after { box-sizing: border-box; }

.hds__kicker { margin: 0 0 .4rem; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hds-muted); }
.hds__title { margin: 0 0 1.25rem; font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; line-height: 1.05; letter-spacing: -.01em; }

/* Suchfeld */
.hds-form {
	position: relative; display: flex; align-items: center; gap: .5rem;
	padding: .4rem .4rem .4rem 1.1rem; border-radius: 999px;
	background: var(--hds-glass); border: 1px solid var(--hds-line);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	box-shadow: 0 8px 30px rgba(9, 30, 46, .25);
	transition: border-color .2s, box-shadow .2s;
}
.hds-form:focus-within { border-color: var(--hds-mint); box-shadow: 0 0 0 3px rgba(6, 214, 160, .25), 0 8px 30px rgba(9, 30, 46, .25); }
.hds-form__icon { flex: none; display: flex; color: var(--hds-mint); }
.hds-form__icon svg { width: 22px; height: 22px; }
.hds-form__input {
	flex: 1; min-width: 0; padding: .7rem .25rem; border: 0; background: transparent; outline: none;
	color: inherit; font: inherit; font-size: 1.15rem;
}
.hds-form__input::placeholder { color: var(--hds-muted); opacity: 1; }
.hds-form__input::-webkit-search-cancel-button { filter: invert(1); opacity: .6; cursor: pointer; }
.hds-form__btn {
	flex: none; padding: .75rem 1.4rem; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--hds-mint); color: #091e2e; font: inherit; font-weight: 800;
	transition: transform .15s, filter .15s;
}
.hds-form__btn:hover, .hds-form__btn:focus-visible { filter: brightness(1.08); transform: translateY(-1px); }
.hds-form__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hds-hint { margin: .7rem 0 2rem 1.1rem; font-size: .85rem; color: var(--hds-muted); }
.hds-hint code, .hds-empty code { padding: .05em .35em; border-radius: 5px; background: var(--hds-glass); font-size: .9em; }

.hds-results { transition: opacity .15s; }
.hds.is-loading .hds-results { opacity: .45; }

/* Startzustand */
.hds-intro p { margin: 0 0 1rem; color: var(--hds-muted); }
.hds-intro__label { margin: 1.5rem 0 .6rem !important; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hds-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.hds-chip {
	padding: .5rem 1rem; border-radius: 999px; cursor: pointer;
	border: 1px solid var(--hds-line); background: var(--hds-glass); color: inherit; font: inherit; font-weight: 700;
	transition: border-color .15s, background-color .15s;
}
.hds-chip:hover, .hds-chip:focus-visible { border-color: var(--hds-mint); background: var(--hds-glass-hover); }

/* Zusammenfassung + Sortierung */
.hds-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 0 1rem; }
.hds-summary p { margin: 0; color: var(--hds-muted); }
.hds-summary strong { color: inherit; }
.hds-sort { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--hds-glass); border: 1px solid var(--hds-line); }
.hds-sort__btn {
	padding: .35rem .9rem; border: 0; border-radius: 999px; background: none; cursor: pointer;
	color: inherit; font: inherit; font-size: .85rem; font-weight: 700; opacity: .75;
}
.hds-sort__btn.is-active { background: var(--hds-mint); color: #091e2e; opacity: 1; }

/* Treffer: eine Glas-Karte pro Folge, darin die besten Fundstellen */
.hds-hits { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.hds-hit {
	margin: 0; border-radius: 18px; overflow: hidden;
	background: var(--hds-glass); border: 1px solid var(--hds-line);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	box-shadow: 0 6px 24px rgba(9, 30, 46, .18);
}
.hds-hit__head {
	display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem 1rem 1rem;
	color: inherit; text-decoration: none;
}
.hds-hit__head:hover .hds-hit__title { text-decoration: underline; text-decoration-color: var(--hds-mint); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.hds-hit__num {
	flex: none; display: flex; align-items: center; justify-content: center; min-width: 56px; height: 48px; padding: 0 .5rem;
	border-radius: 12px; background: rgba(255, 255, 255, .08); color: var(--hds-mint); font-weight: 800; font-size: .95rem;
}
.hds-hit__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.hds-hit__title { font-size: 1.15rem; font-weight: 800; line-height: 1.25; }
.hds-hit__meta { font-size: .85rem; color: var(--hds-muted); }
.hds-hit__arrow { flex: none; opacity: .5; transition: transform .2s, opacity .2s; }
.hds-hit__head:hover .hds-hit__arrow { opacity: 1; transform: translateX(3px); }

.hds-spots { list-style: none; margin: 0; padding: 0 .5rem .5rem; }
.hds-spots li { margin: 0; }
.hds-spot {
	display: flex; gap: .9rem; padding: .7rem .75rem; border-radius: 12px;
	color: inherit; text-decoration: none; border-top: 1px solid var(--hds-line);
	transition: background-color .15s;
}
.hds-spots li:first-child .hds-spot { border-top-color: transparent; }
.hds-spot:hover, .hds-spot:focus-visible { background: var(--hds-glass-hover); }
.hds-spot__ts {
	flex: none; align-self: flex-start; min-width: 4.2rem; margin-top: .1rem; padding: .15rem .45rem; border-radius: 6px; text-align: center;
	background: rgba(255, 255, 255, .08); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem;
}
.hds-spot__ts:empty { visibility: hidden; }
.hds-spot__body { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.hds-spot__who { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hds-muted); }
.hds-spot__text { font-size: .98rem; line-height: 1.6; }
.hds mark { padding: 0 .15em; border-radius: 3px; background: var(--hds-mint); color: #091e2e; }
.hds-more {
	display: block; margin: 0 1.25rem .9rem calc(1.25rem + 4.2rem + .9rem - .5rem);
	font-size: .88rem; font-weight: 700; color: inherit; text-decoration: underline; text-decoration-color: var(--hds-mint); text-underline-offset: 3px;
}

/* Keine Treffer */
.hds-empty { padding: 1.5rem; border-radius: 18px; background: var(--hds-glass); border: 1px dashed var(--hds-line); }
.hds-empty__title { margin: 0 0 .5rem; font-weight: 800; font-size: 1.1rem; }
.hds-empty p:last-child { margin: 0; color: var(--hds-muted); }

/* Seiten */
.hds-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 2rem 0 0; }
.hds-pages__btn {
	min-width: 2.6rem; height: 2.6rem; padding: 0 .6rem; border-radius: 999px; cursor: pointer;
	border: 1px solid var(--hds-line); background: var(--hds-glass); color: inherit; font: inherit; font-weight: 700;
	display: inline-flex; align-items: center; justify-content: center;
}
.hds-pages__btn:hover { border-color: var(--hds-mint); }
.hds-pages__btn.is-current { background: var(--hds-mint); border-color: var(--hds-mint); color: #091e2e; }
.hds-pages__gap { align-self: center; opacity: .6; }

.hds a:focus-visible, .hds button:focus-visible { outline: 2px solid var(--hds-mint); outline-offset: 2px; }

@media (max-width: 560px) {
	.hds-form { padding-left: .9rem; }
	.hds-form__btn { padding: .7rem 1rem; }
	.hds-hint { margin-left: .9rem; }
	.hds-hit__head { padding: .85rem 1rem .85rem .85rem; gap: .75rem; }
	.hds-hit__num { min-width: 48px; height: 42px; }
	.hds-spot { flex-direction: column; gap: .35rem; }
	.hds-spot__ts { min-width: 0; align-self: flex-start; }
	.hds-more { margin-left: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .hds * { transition: none !important; } }

/* Kleines Suchfeld über der Episoden-Übersicht */
.hds-mini { margin: 0 0 2rem; max-width: 560px; }
.hds-mini .hds-form__input { font-size: 1rem; padding: .55rem .25rem; }
.hds-mini .hds-form__btn { padding: .6rem 1.1rem; }

/* Seitentitel des Themes auf der Suchseite ausblenden (der Block bringt die Überschrift mit) */
.hds-page .wp-block-post-title { display: none; }

/* Schnelltreffer oben: Gäste, Folgentitel, Kapitelmarken */
.hds-sec { margin: 0 0 1.75rem; }
.hds-sec__title { margin: 0 0 .7rem; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hds-muted); }
.hds-sec__more { margin: .5rem 0 0 .25rem; font-size: .85rem; color: var(--hds-muted); }
.hds-guests { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.hds-guests li { margin: 0; flex: 1 1 220px; max-width: 100%; }
.hds-guest {
	display: flex; align-items: center; gap: .75rem; padding: .55rem 1rem .55rem .55rem; border-radius: 999px;
	background: var(--hds-glass); border: 1px solid var(--hds-line); color: inherit; text-decoration: none;
	transition: border-color .15s, background-color .15s;
}
.hds-guest:hover, .hds-guest:focus-visible { border-color: var(--hds-mint); background: var(--hds-glass-hover); }
.hds-guest__pic {
	flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
	background: rgba(255, 255, 255, .08); color: var(--hds-mint); font-weight: 800; font-size: .85rem;
}
.hds-guest__pic img { width: 100%; height: 100%; object-fit: cover; }
.hds-guest__text { display: flex; flex-direction: column; min-width: 0; }
.hds-guest__name { font-weight: 800; }
.hds-guest__count { font-size: .8rem; color: var(--hds-muted); }
.hds-rows { list-style: none; margin: 0; padding: 0; border-radius: 18px; overflow: hidden; background: var(--hds-glass); border: 1px solid var(--hds-line); }
.hds-rows li { margin: 0; }
.hds-rows li + li .hds-row { border-top: 1px solid var(--hds-line); }
.hds-row { display: flex; align-items: baseline; gap: .8rem; padding: .7rem 1rem; color: inherit; text-decoration: none; transition: background-color .15s; }
.hds-row:hover, .hds-row:focus-visible { background: var(--hds-glass-hover); }
.hds-row__num { flex: none; min-width: 3rem; color: var(--hds-mint); font-weight: 800; }
.hds-row__ts { flex: none; padding: .1rem .4rem; border-radius: 6px; background: rgba(255, 255, 255, .08); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; }
.hds-row__text { flex: 1; min-width: 0; font-weight: 700; }
.hds-row__meta { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; color: var(--hds-muted); }
@media (max-width: 560px) {
	.hds-row { flex-wrap: wrap; row-gap: .2rem; }
	.hds-row__meta { max-width: 100%; flex-basis: 100%; padding-left: calc(3rem + .8rem); }
}

/* Fokus-Rahmen des Themes im Suchfeld aus – der Fokus zeigt sich am Rand der Pille */
.hds .hds-form__input, .hds .hds-form__input:focus, .hds .hds-form__input:focus-visible { border: 0; box-shadow: none; outline: none; background: transparent; }

/* Zeitraum, Hinweise, Erwähnungen */
.hds-years { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0 0 1.5rem; }
.hds-years__label { margin-right: .35rem; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hds-muted); }
.hds-years__btn {
	padding: .3rem .8rem; border-radius: 999px; cursor: pointer;
	border: 1px solid var(--hds-line); background: var(--hds-glass); color: inherit; font: inherit; font-size: .85rem; font-weight: 700;
}
.hds-years__btn:hover { border-color: var(--hds-mint); }
.hds-years__btn.is-active { background: var(--hds-mint); border-color: var(--hds-mint); color: #091e2e; }
.hds-note { margin: 0 0 1rem; padding: .7rem 1rem; border-radius: 12px; border-left: 3px solid var(--hds-mint); background: var(--hds-glass); font-size: .92rem; }
.hds-hit__badge {
	flex: none; padding: .2rem .6rem; border-radius: 999px; border: 1px solid rgba(6, 214, 160, .55);
	color: var(--hds-mint); font-size: .75rem; font-weight: 700; white-space: nowrap;
}
@media (max-width: 560px) { .hds-hit__badge { display: none; } }