/*
Theme Name: Praxis Sturz
Theme URI: https://www.zahnarztpraxis-sturz-augsburg.de
Author: Lilith Oldenbuettel
Description: Block-Theme für die Zahnarztpraxis Dr. Dr. Philipp Sturz, Augsburg.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
Version: 0.5.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: praxis-sturz
*/

/* ------------------------------------------------------------------
   Design-Variablen
   Quelle: docs/Uebergabe-Website.md, Abschnitte 1.1 (Farben) und
   1.2 (Schriften). Die Presets in theme.json spiegeln dieselben Werte.
   ------------------------------------------------------------------ */

:root {
	/* 1.1 Farben */
	--ps-color-dark: #161310;         /* primärer dunkler Hintergrund (Hero, CTA-Bänder) */
	--ps-color-dark-card: #211C16;    /* Karten und Overlays auf dunklem Grund */
	--ps-color-darkest: #0F0C09;      /* Footer, Header nach Scroll */
	--ps-color-bone: #F6F1E9;         /* heller Seitenhintergrund, Text auf dunklem Grund */
	--ps-color-white: #FFFFFF;        /* Karten, Akkordeons, FAQ-Boxen */
	--ps-color-gold: #BF9A57;         /* Akzent: Buttons, Rahmen, Eyebrow-Striche, Linien */
	--ps-color-gold-dark: #9A7836;    /* Gold für Text und Links auf hellem Grund */
	--ps-color-gold-light: #E4C982;   /* Hover des primären Buttons */
	--ps-color-wood: #CBAA83;         /* Holzton, dekorative Flächen */
	--ps-color-wood-dark: #B68E63;    /* Holzton dunkler */
	--ps-color-muted: #6E665B;        /* Fließtext auf hellem Grund */
	--ps-color-muted-dark: #B6AB99;   /* Fließtext auf dunklem Grund */
	--ps-line: rgba(22, 19, 16, 0.12);              /* Trennlinien auf hellem Grund */
	--ps-line-strong: rgba(22, 19, 16, 0.2);        /* Trennlinien stärker, Ghost-Button-Rand */
	--ps-line-on-dark: rgba(246, 241, 233, 0.14);   /* Trennlinien auf dunklem Grund */
	--ps-gold-transparent: rgba(191, 154, 87, 0.45); /* Rahmen und Linien auf dunklem Grund */

	/* 1.2 Schriften. Überschriften seit 2026-10-21 in Barlow Semi Condensed; die
	   Familie kommt aus theme.json (settings.custom.fontHeading), Rückweg zu
	   Cormorant Garamond siehe content/staging-notes.md. */
	--ps-font-heading: var(--wp--custom--font-heading, "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif);
	--ps-font-body: "Jost", "Helvetica Neue", Arial, sans-serif;
	--ps-size-h1-hero: clamp(46px, 6.2vw, 78px);
	--ps-size-h2-section: clamp(36px, 4.6vw, 58px);
	--ps-size-h2-detail: clamp(28px, 26px + 0.5vw, 33px);
	--ps-size-body: clamp(15.5px, 15px + 0.15vw, 17px);
	--ps-size-eyebrow: 11.5px;
	--ps-size-button: 13.5px;
	--ps-leading-h1: 1.04;
	--ps-tracking-eyebrow: 0.32em;
	--ps-tracking-button: 0.06em;

	/* 1.3 Layout */
	--ps-radius: 4px;
	--ps-width-content: 1140px;
	--ps-width-reading: 760px;
	--ps-gutter: 24px;
}

/* ------------------------------------------------------------------
   Grundlagen
   ------------------------------------------------------------------ */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* WordPress setzt den Block-Abstand (1.25rem) auch zwischen Header, main und
   Footer. Die Abschnitte sollen aber bündig aneinander liegen. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Vorgabe: kein Fettdruck im Fließtext. Fett wird auf Schnitt 500 abgemildert,
   damit der Browser keinen künstlichen Fettschnitt erzeugt. */
strong,
b {
	font-weight: 500;
}

/* ------------------------------------------------------------------
   Typografie: Barlow Semi Condensed für Überschriften und Display-Texte
   (Kundenwunsch 2026-10-21). Eine schmale Grotesk wirkt bei gleicher
   Pixelgröße kleiner als die Garamond, deshalb sind die Preset-Größen in
   theme.json angehoben und feste Inline-Größen der gespeicherten Blöcke
   werden hier um rund 15 Prozent nachgezogen (daher !important).
   ------------------------------------------------------------------ */

.ps-card h3,
.ps-tile h3 {
	font-size: clamp(24px, 22px + 0.5vw, 28px) !important; /* Blöcke: 1.5rem; auf dem Smartphone eine Stufe unter der Detail-H2 */
}

.ps-contact-card h3,
.ps-booking h3,
.ps-hero__card h3 {
	font-size: 1.6rem !important; /* Blöcke: 1.375rem */
}

.ps-portrait h3 {
	font-size: 1.45rem !important; /* Blöcke: 1.25rem */
}

/* Kursives Gold im Hero ("ehrliche") im kursiven Schnitt der Überschrift. */
h1 em,
h2 em {
	font-style: italic;
	font-weight: 600;
}

/* FAQ-Fragen in der Überschriftenschrift. */
.wp-block-details summary {
	font-family: var(--ps-font-heading);
	font-size: 1.3rem;
	font-weight: 500;
	line-height: 1.25;
}

/* Startseite, Einleitung der Leistungen: A und Z in Gold, eine Stufe größer,
   im kräftigsten Schnitt von Jost (500; die Schrift hat keinen 700er). Greift
   auf das gespeicherte Markup der Startseite (Absatz vor den Kacheln). */
.wp-block-group:has(> .ps-tiles) > p.has-large-font-size mark.has-gold-dark-color {
	font-size: 1.25em;
	font-weight: 500;
	line-height: 1; /* die größeren Buchstaben sollen die erste Zeile nicht höher machen */
}

/* ------------------------------------------------------------------
   Header
   ------------------------------------------------------------------ */

/* Der Template-Part-Wrapper bleibt beim Scrollen oben stehen. */
.ps-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar .ps-site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .ps-site-header {
		top: 46px;
	}
}

.ps-header {
	border-bottom: 1px solid var(--ps-line-on-dark);
}

/* Bis 1099px fehlt der Platz für das gesperrte Versalien-Menü neben Logo,
   Nummer und Button (iPad quer): die Nummer bleibt dort verborgen. */
@media (max-width: 1099px) {
	.ps-header .ps-header__phone {
		display: none; /* schlägt die inline-flex-Regel darunter */
	}
}

/* Telefonnummer mit goldenem Hörer-Symbol (Inline-SVG in currentColor). */
.ps-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	white-space: nowrap;
}

.ps-header__phone svg {
	flex: none;
	width: 1.1em;
	height: 1.1em;
	color: var(--ps-color-gold);
}

/* Menü: Barlow Semi Condensed, Versalien mit Sperrung (theme.json); die
   aktuelle Seite in Gold mit dünner goldener Linie darunter. Die Klasse
   current-menu-item setzt functions.php auch für eigene Links per Pfadvergleich,
   current-menu-ancestor für Unterseiten (Leistungsseiten unter "Leistungen"). */
.ps-header .wp-block-navigation-item.current-menu-item > a,
.ps-header .wp-block-navigation-item.current-menu-ancestor > a,
.ps-header .wp-block-navigation-item > a[aria-current="page"] {
	color: var(--ps-color-gold);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--ps-color-gold);
	text-underline-offset: 0.5em;
}

/* Im Overlay (Smartphone, Tablet) dieselbe Typografie, etwas größer. */
.ps-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.25rem;
}

/* Bis 899px reicht der Platz nicht für fünf Menüpunkte neben Logo und Button:
   das Menü klappt wie auf dem Smartphone hinter dem Menü-Symbol ein
   (Core schaltet erst unter 600px um). */
@media (min-width: 600px) and (max-width: 899px) {
	.ps-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.ps-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Logo: Inline-SVG (assets/img/logo.svg, Pfade in currentColor), die Farbe
   kommt aus der Palette (Gold). Link ohne Zeilenhöhe, Button nicht umbrechen. */
.ps-header__logo {
	display: block;
	flex: none;
	line-height: 0;
	color: var(--ps-color-gold);
}

.ps-header__logo svg,
.ps-header__logo img {
	display: block;
	width: 140px;
	height: auto;
	color: var(--ps-color-gold);
}

.ps-header .wp-block-button__link {
	white-space: nowrap;
}

/* Smartphone: kleineres Logo und kompakterer Button, damit die Kopfzeile
   nicht über den Rand läuft. */
@media (max-width: 599px) {
	.ps-header__logo svg,
	.ps-header__logo img {
		width: 104px;
	}

	.ps-header .wp-block-button__link {
		padding: 0.75rem 0.9rem;
		font-size: 12px;
	}
}

/* ------------------------------------------------------------------
   Header und Footer: Links ohne Unterstreichung, Gold beim Hover
   (Buttons ausgenommen)
   ------------------------------------------------------------------ */

.ps-header a,
.ps-footer a {
	text-decoration: none;
}

.ps-header a:where(:not(.wp-element-button)):hover,
.ps-footer a:where(:not(.wp-element-button)):hover {
	color: var(--ps-color-gold);
}

/* ------------------------------------------------------------------
   Block-Stile (registriert in functions.php)
   ------------------------------------------------------------------ */

/* Eyebrow: kleines Label über Überschriften mit kurzem Goldstrich (Spec 1.2).
   Auf dunklem Grund bekommt der Absatz die Textfarbe Gold als Block-Einstellung. */
.is-style-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--ps-color-gold-dark);
	font-size: var(--ps-size-eyebrow);
	font-weight: 400;
	letter-spacing: var(--ps-tracking-eyebrow);
	text-transform: uppercase;
}

.is-style-eyebrow.has-text-align-center {
	justify-content: center;
}

.is-style-eyebrow::before {
	content: "";
	flex: none;
	width: 28px;
	height: 1px;
	background: currentColor;
}

/* Häkchen-Liste: Linien-Häkchen (Strich 1,7) als SVG-Maske in Gold.
   Die Liste bleibt eine normale, im Editor bearbeitbare Liste. */
.is-style-check {
	padding-left: 0;
	list-style: none;
}

.is-style-check li {
	position: relative;
	padding-left: 2rem;
}

.is-style-check li + li {
	margin-top: 0.6rem;
}

.is-style-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 1.15em;
	height: 1.15em;
	background-color: var(--ps-color-gold);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12.5 2.6 2.6L16 9.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 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12.5 2.6 2.6L16 9.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Ghost-Button (Core-Stil "Outline"): 1px Rand, gleiche Höhe wie der gefüllte Button. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border-width: 1px;
	border-color: var(--ps-line-strong);
	padding: calc(0.9rem - 1px) calc(1.4rem - 1px);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--ps-color-gold);
}

/* Footer: eine Schrift (Jost), eine Größe, eine Farbe (Beige); die Spalten-Label
   in Gold sind der einzige Akzent. Statt des Namens steht das goldene Logo. */
.ps-footer {
	font-size: var(--wp--preset--font-size--medium);
}

.ps-footer__logo {
	display: inline-block;
	line-height: 0;
	color: var(--ps-color-gold);
}

.ps-footer__logo svg,
.ps-footer__logo img {
	display: block;
	width: 160px;
	height: auto;
	color: var(--ps-color-gold);
}

/* Footer: Leistungen-Zeile über den Spalten. Die elf Links laufen als Fließtext
   mit Trennpunkten; ein Name bricht nie in sich um, nur zwischen den Links. */
.ps-footer__leistungen a {
	white-space: nowrap;
}

.ps-footer__leistungen p:last-child {
	max-width: none;
	line-height: 1.9;
}

/* ------------------------------------------------------------------
   Beratungs-Band ("Welche Leistung passt zu Ihnen?" / "Lernen Sie uns
   persönlich kennen"): ab 768px Überschrift links und Button rechts in einer
   Zeile, darunter gestapelt und linksbündig. Greift über die Klasse
   ps-band-beratung (Pattern) und, weil die gespeicherten Bänder keine Klasse
   tragen, zusätzlich über ihre Struktur: dunkle Gruppe mit zentrierter
   Überschrift und genau einem Termin-Button, ohne Eyebrow und ohne zweiten
   Button (so bleiben das Termin-Band der Startseite und die Bänder mit
   Eyebrow unberührt).
   ------------------------------------------------------------------ */

.ps-band-beratung,
.wp-block-group.alignfull.has-dark-background-color:has(> h2.has-text-align-center):has(> .wp-block-buttons > .ps-drflex):not(:has(> .is-style-eyebrow)):not(:has(> .wp-block-buttons > .is-style-outline)) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 3rem;
	align-items: center;
	/* Prozent bezieht sich auf den Inhaltsbereich von main (Viewport minus 2 Ränder),
	   deshalb die beiden Ränder wieder dazurechnen: ergibt die Inhaltskante (70px bei 1280). */
	padding-right: max(var(--ps-gutter), calc((100% + 2 * var(--ps-gutter) - var(--ps-width-content)) / 2));
	padding-left: max(var(--ps-gutter), calc((100% + 2 * var(--ps-gutter) - var(--ps-width-content)) / 2));
}

.ps-band-beratung > *,
.wp-block-group.alignfull.has-dark-background-color:has(> h2.has-text-align-center):has(> .wp-block-buttons > .ps-drflex):not(:has(> .is-style-eyebrow)):not(:has(> .wp-block-buttons > .is-style-outline)) > * {
	margin: 0 !important; /* Core zentriert Kinder des eingeschränkten Layouts mit margin auto !important */
	max-width: none;
	text-align: left;
}

/* Abstand zum Absatz als Außenabstand statt Zeilenabstand, damit ein Band ohne
   Absatz den Button exakt auf die Überschrift zentriert. */
.ps-band-beratung > p,
.wp-block-group.alignfull.has-dark-background-color:has(> h2.has-text-align-center):has(> .wp-block-buttons > .ps-drflex):not(:has(> .is-style-eyebrow)):not(:has(> .wp-block-buttons > .is-style-outline)) > p {
	margin-top: 0.75rem !important;
}

.ps-band-beratung > .wp-block-buttons,
.wp-block-group.alignfull.has-dark-background-color:has(> h2.has-text-align-center):has(> .wp-block-buttons > .ps-drflex):not(:has(> .is-style-eyebrow)):not(:has(> .wp-block-buttons > .is-style-outline)) > .wp-block-buttons {
	justify-content: flex-start;
	margin-top: 1rem !important;
}

@media (min-width: 768px) {
	.ps-band-beratung,
	.wp-block-group.alignfull.has-dark-background-color:has(> h2.has-text-align-center):has(> .wp-block-buttons > .ps-drflex):not(:has(> .is-style-eyebrow)):not(:has(> .wp-block-buttons > .is-style-outline)) {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.ps-band-beratung > .wp-block-buttons,
	.wp-block-group.alignfull.has-dark-background-color:has(> h2.has-text-align-center):has(> .wp-block-buttons > .ps-drflex):not(:has(> .is-style-eyebrow)):not(:has(> .wp-block-buttons > .is-style-outline)) > .wp-block-buttons {
		grid-column: 2;
		grid-row: 1 / span 2;
		justify-content: flex-end;
		margin-top: 0 !important;
	}
}

/* Zentrierte Bänder (Eyebrow über zentrierter Überschrift, z. B. "Zahnersatz
   aus dem eigenen Haus"): Eyebrow mittig und ohne Strich. Allgemein: ein
   zentrierter Eyebrow hat nie einen Strich. */
.wp-block-group.has-dark-background-color:has(> h2.has-text-align-center) > .is-style-eyebrow {
	justify-content: center;
}

.is-style-eyebrow.has-text-align-center::before,
.wp-block-group.has-dark-background-color:has(> h2.has-text-align-center) > .is-style-eyebrow::before {
	display: none;
}

/* ------------------------------------------------------------------
   Startseite: Hero
   ------------------------------------------------------------------ */

/* Foto mit überlappender Meisterlabor-Karte; die Karte ist komplett klickbar. */
.ps-hero__media {
	position: relative;
}

/* Die Karte sitzt unten links am Foto und hängt über dessen Unterkante:
   nur ihr oberes Drittel liegt auf dem Foto, Gesichter und Schultern bleiben
   frei (Kundenwunsch 2026-10-07). */
.ps-hero__card {
	position: absolute;
	left: 0;
	top: 100%;
	margin: 0; /* sonst rückt der Block-Abstand der Gruppe die Karte nach unten */
	transform: translateY(-33.333%);
	width: min(320px, calc(100% - 2rem));
}

.ps-hero__card h3 a {
	text-decoration: none;
}

.ps-hero__card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

@media (max-width: 1023px) {
	.ps-hero__card {
		position: relative;
		left: 0;
		top: auto;
		bottom: 0;
		transform: none;
		width: calc(100% - 2rem);
		margin: -3rem auto 0;
	}
}

/* Gestapelt (Tablet) wird das 4:5-Foto sonst sehr hoch. */
@media (min-width: 600px) and (max-width: 1023px) {
	.ps-hero__media img {
		max-height: 560px;
	}
}

/* ------------------------------------------------------------------
   Kontakt: drei gleich breite Kontaktkarten über die volle Breite, die
   Buchungsbox so hoch wie die Spalte links (Button und Hinweis unten)
   ------------------------------------------------------------------ */

/* Die Links in den drei Kontaktkarten ohne Unterstreichung, in Textgold. */
.ps-contact-card a {
	color: var(--ps-color-gold-dark);
	text-decoration: none;
}

.ps-contact-card a:hover {
	color: var(--ps-color-gold);
}

/* Ab 1024px würde das Raster (Mindestbreite 16rem) vier Spuren anlegen und
   die dritte Karte endete vor dem rechten Rand; drei gleiche Spalten statt
   dessen. Darunter bleibt das automatische Raster (zwei Spuren, volle Breite). */
@media (min-width: 1024px) {
	.ps-kontakt .ps-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Die Spalten des Columns-Blocks sind gleich hoch; die Box füllt ihre Spalte
   und schiebt Buchungs-Button und Hinweis an ihre Unterkante, so dass sie mit
   dem Ende der Öffnungszeiten links abschließt. */
.ps-kontakt .ps-booking {
	box-sizing: border-box;
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* Der Button kommt aus dem Dr.-Flex-Shortcode (.drflex-button-wrapper); der
   zweite Selektor (vorletztes Kind = Element vor dem Hinweis) hält die
   Verankerung, falls das Plugin sein Markup ändert. */
.ps-kontakt .ps-booking > .drflex-button-wrapper,
.ps-kontakt .ps-booking > :nth-last-child(2) {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--40);
}

/* ------------------------------------------------------------------
   Startseite: Leistungs-Kacheln (ohne Icons, komplett klickbar)
   ------------------------------------------------------------------ */

.ps-tile {
	position: relative;
	transition: border-color 0.2s;
}

.ps-tile:hover {
	border-color: var(--ps-color-gold) !important;
}

.ps-tile h3 a {
	color: inherit;
	text-decoration: none;
}

.ps-tile:hover h3 a {
	color: var(--ps-color-gold-dark);
}

.ps-tile h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* ------------------------------------------------------------------
   FAQ: Details-Block ohne Standard-Dreieck, mit Chevron in Gold
   ------------------------------------------------------------------ */

.wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	list-style: none;
	cursor: pointer;
	color: var(--ps-color-dark);
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "";
	flex: none;
	width: 1rem;
	height: 1rem;
	background-color: var(--ps-color-gold);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%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 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform 0.2s;
}

.wp-block-details[open] summary::after {
	transform: rotate(180deg);
}

.wp-block-details > :not(summary):first-of-type {
	margin-top: 0.75rem;
}

/* ------------------------------------------------------------------
   Unterseiten: Zurück-Link, Fließtext, Leistungs-Karten mit Icon
   ------------------------------------------------------------------ */

.ps-backlink a {
	text-decoration: none;
}

.ps-backlink a:hover {
	text-decoration: underline;
}

/* Lange Adressen als Linktext dürfen umbrechen, sonst laufen sie auf dem
   Smartphone aus der Spalte. */
.ps-detail a {
	overflow-wrap: anywhere;
}

/* Zwischenüberschriften im Fließtext bekommen mehr Luft nach oben. */
.ps-detail h2 {
	margin-block-start: 2.5rem;
}

.ps-detail ul,
.ps-detail ol {
	padding-left: 1.25rem;
}

.ps-detail li + li {
	margin-top: 0.35rem;
}

/* Icon-Rahmen in Gold (Spec 1.1), Icon als Linien-SVG in currentColor. */
.ps-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--ps-gold-transparent);
	border-radius: var(--ps-radius);
	color: var(--ps-color-gold);
}

.ps-icon svg {
	width: 26px;
	height: 26px;
}

/* Karte komplett klickbar über den Link "Mehr erfahren". */
.ps-card {
	position: relative;
	transition: border-color 0.2s;
}

.ps-card:hover {
	border-color: var(--ps-color-gold) !important;
}

.ps-card__link a {
	text-decoration: none;
}

.ps-card__link a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* ------------------------------------------------------------------
   Über uns: Porträts (alle gleich groß, zentriert), Link-Overlay
   ------------------------------------------------------------------ */

.ps-portrait {
	width: 250px;
	max-width: 100%;
}

.ps-portrait .wp-block-image {
	margin: 0;
}

.ps-portrait h3 {
	margin-block-start: 0.75rem;
}

/* Foto mit externem Link: halbtransparente dunkle Abdeckung mit Hinweis beim Hover. */
.ps-portrait--link a {
	position: relative;
	display: block;
}

.ps-portrait--link a::after {
	content: "Zur Website";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--ps-radius);
	background: rgba(22, 19, 16, 0.55);
	color: var(--ps-color-bone);
	font-size: var(--ps-size-button);
	font-weight: 500;
	letter-spacing: var(--ps-tracking-button);
	text-transform: uppercase;
	opacity: 0;
	transition: opacity 0.2s;
}

.ps-portrait--link a:hover::after,
.ps-portrait--link a:focus-visible::after {
	opacity: 1;
}