/* =========================================================================
   Altstädter Bücherstuben – Marken-Styles

   Bewusst knapp gehalten. Farben, Schriften, Abstände und Rahmen der
   Seiteninhalte stecken in theme.json bzw. in den Astra-Einstellungen und
   werden über die Block-Optionen gesetzt – nicht hier.

   Hier steht nur, was Blockeinstellungen nicht abdecken können:
   1. Astras globale Farbvariablen (gibt das Theme selbst nicht aus)
   2. Sichtbarer Tastaturfokus
   3. Die drei PHP-Templates (Archivkopf, Buchkarte, Einzelansicht) –
      Astra ist ein klassisches Theme, dafür gibt es keine Blockvorlagen.
   ========================================================================= */

:root {
	--abs-primary: #bf5f7a;
	--abs-primary-dark: #a34c65;
	--abs-secondary: #89747a;
	--abs-ink: #333333;
	--abs-ink-soft: #6b6b6b;
	--abs-line: #e6dcdf;
	--abs-surface-alt: #faf6f7;
	--abs-radius: 4px;
	--abs-shadow: 0 2px 18px rgba(137, 116, 122, 0.13);
	--abs-shadow-lift: 0 10px 34px rgba(137, 116, 122, 0.22);

	/* Astras globale Farbvariablen. Das Theme gibt sie in dieser
	   Konstellation nicht selbst aus – ohne Definition fällt z. B. das
	   aktive Menuelement auf Astras Default-Blau zurück. */
	--ast-global-color-0: #bf5f7a;
	--ast-global-color-1: #a34c65;
	--ast-global-color-2: #333333;
	--ast-global-color-3: #6b6b6b;
	--ast-global-color-4: #ffffff;
	--ast-global-color-5: #faf6f7;
	--ast-global-color-6: #89747a;
	--ast-global-color-7: #e6dcdf;
	--ast-global-color-8: #333333;
	--ast-border-color: #e6dcdf;
}

/* Astra blendet den Fokusring teilweise aus. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--abs-primary);
	outline-offset: 2px;
}

/* Volle Breite in Astras Container. width muss explizit 100vw sein –
   mit "auto" addiert sich die Polsterung des Elterncontainers auf und
   die Seite scrollt horizontal. */
.ast-plain-container .entry-content > .alignfull,
.ast-page-builder-template .entry-content > .alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}
html, body { overflow-x: clip; }

/* Startseite ohne Titelbanner */
.home .ast-archive-description,
.home .entry-header .entry-title { display: none; }

/* -------------------------------------------------------------------------
   Kopf der Beitragsseite  (functions.php -> abs_blog_archive_header)
   ---------------------------------------------------------------------- */
.abs-archive-header {
	text-align: center;
	max-width: 44rem;
	margin: 0 auto 3rem;
}
.abs-archive-header__title {
	font-weight: 300;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	margin: 0 0 0.75rem;
}
.abs-archive-header__intro {
	margin: 0;
	color: var(--abs-secondary);
	line-height: 1.75;
}

/* -------------------------------------------------------------------------
   Buchkarte im Archiv  (template-parts/blog/blog-layout.php)
   ---------------------------------------------------------------------- */
.abs-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--abs-line);
	border-radius: var(--abs-radius);
	overflow: hidden;
	box-shadow: var(--abs-shadow);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.abs-card:hover,
.abs-card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--abs-shadow-lift);
}

.abs-card__media {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--abs-surface-alt);
}
.abs-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.abs-card:hover .abs-card__img { transform: scale(1.04); }

.abs-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.5rem 1.4rem 1.6rem;
}
.abs-card__kicker {
	margin: 0 0 0.5rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--abs-primary);
}
.abs-card__title {
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 0.4rem;
}
.abs-card__title a { color: var(--abs-ink); text-decoration: none; }
.abs-card__title a:hover,
.abs-card__title a:focus { color: var(--abs-primary-dark); }

.abs-card__publisher {
	margin: 0 0 0.85rem;
	font-size: 0.82rem;
	font-style: italic;
	color: var(--abs-secondary);
}
.abs-card__excerpt {
	font-size: 0.92rem;
	line-height: 1.65;
	color: var(--abs-ink-soft);
}
.abs-card__excerpt p { margin: 0; }

.abs-card__more {
	margin: 1.1rem 0 0;
	padding-top: 1rem;
	border-top: 1px dashed var(--abs-line);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.abs-card__more a {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.abs-card__more a span[aria-hidden] { transition: transform 0.2s ease; }
.abs-card__more a:hover span[aria-hidden] { transform: translateX(4px); }

/* -------------------------------------------------------------------------
   Einzelansicht  (template-parts/single/single-layout.php)
   ---------------------------------------------------------------------- */
.single-post .site-main > article { max-width: 1100px; margin-inline: auto; }

.abs-single__header {
	text-align: center;
	max-width: 46rem;
	margin: 0 auto 2.5rem;
}
.abs-single__kicker {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.abs-single__kicker a { text-decoration: none; }

.abs-single__title {
	font-weight: 300;
	font-size: clamp(1.75rem, 4.2vw, 2.75rem);
	line-height: 1.25;
	margin: 0 0 0.9rem;
}
.abs-single__meta {
	margin: 0;
	font-size: 0.85rem;
	color: var(--abs-secondary);
}
.abs-single__sep { margin: 0 0.5rem; }

.abs-single__grid {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: clamp(1.75rem, 4vw, 3.25rem);
	align-items: start;
}
.abs-single__cover { margin: 0; position: sticky; top: 6rem; }
.abs-single__cover-img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--abs-radius);
	box-shadow: var(--abs-shadow-lift);
}
.abs-single__cover figcaption {
	margin-top: 0.6rem;
	font-size: 0.78rem;
	color: var(--abs-ink-soft);
	text-align: center;
}
.abs-single__content { line-height: 1.8; }
.abs-single__content > p:first-of-type { font-size: 1.12rem; }

.abs-single__tags {
	margin-top: 2.75rem;
	padding-top: 1.5rem;
	border-top: 1px dashed var(--abs-line);
}
.abs-single__tags-label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--abs-secondary);
	margin: 0 0 0.9rem;
}
.abs-single__tags ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.abs-single__tags a {
	display: inline-block;
	padding: 0.32rem 0.85rem;
	font-size: 0.8rem;
	text-decoration: none;
	color: var(--abs-secondary);
	background: var(--abs-surface-alt);
	border: 1px solid var(--abs-line);
	border-radius: 999px;
	transition: all 0.2s ease;
}
.abs-single__tags a:hover,
.abs-single__tags a:focus {
	color: #fff;
	background: var(--abs-primary-dark);
	border-color: var(--abs-primary-dark);
}

.abs-single__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-top: 3.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--abs-line);
}
.abs-single__nav-item {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.15rem 1.3rem;
	text-decoration: none;
	background: var(--abs-surface-alt);
	border: 1px solid var(--abs-line);
	border-radius: var(--abs-radius);
	transition: all 0.2s ease;
}
.abs-single__nav-item:hover,
.abs-single__nav-item:focus {
	border-color: var(--abs-primary);
	background: #fff;
}
.abs-single__nav-item--next { text-align: right; }
.abs-single__nav-label {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--abs-primary-dark);
}
.abs-single__nav-title { line-height: 1.4; color: var(--abs-ink); }

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */
@media (max-width: 921px) {
	.abs-single__grid { grid-template-columns: 1fr; }
	.abs-single__cover { position: static; max-width: 260px; margin-inline: auto; }
}
@media (max-width: 544px) {
	.abs-single__nav { grid-template-columns: 1fr; }
	.abs-single__nav-item--next { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
	.abs-card,
	.abs-card__img,
	.abs-card__more a span[aria-hidden] { transition: none; }
	.abs-card:hover { transform: none; }
	.abs-card:hover .abs-card__img { transform: none; }
}

/* Zwei Lücken in Astras Social-Icons:
   1. Bei Farbtyp "custom" schreibt das Theme die gewählte Farbe als --color
      auf jedes Icon, gibt aber keine Regel aus, die sie ausliest.
   2. Die eingebetteten SVGs erben die Textfarbe nicht (fill bleibt schwarz).
   Ohne beides blieben die Icons dunkel auf der altrosa Fläche. */
.ast-social-color-type-custom .ast-builder-social-element {
	color: var(--color, currentColor);
}
.ast-builder-social-element svg {
	fill: currentColor;
}

/* Footer steht auf der dunklen Markenfläche. Astras Farboptionen für die
   einzelnen Footer-Komponenten (HTML-Baustein, Menü) erzeugen in dieser
   Konstellation kein CSS – deshalb hier einmal zentral statt an sechs
   Stellen im Customizer. */
.site-primary-footer-wrap,
.site-below-footer-wrap {
	color: #fff;
}
.site-primary-footer-wrap a,
.site-below-footer-wrap a {
	color: #fff;
}
.site-primary-footer-wrap a:hover,
.site-primary-footer-wrap a:focus,
.site-below-footer-wrap a:hover,
.site-below-footer-wrap a:focus {
	color: rgba(255, 255, 255, 0.75);
}