/* Pascal Hugo – Theme-Stile (ergänzend zu theme.json). */

:root {
	--ph-section-space: var(--wp--preset--spacing--60);
	--ph-rule: 1px solid var(--wp--preset--color--line);
	--ph-rule-strong: 1px solid var(--wp--preset--color--contrast);
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
:where(a) { text-underline-offset: .18em; }
:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.screen-reader-text:focus { background: var(--wp--preset--color--surface); }

/* ------------------------------------------------------------------ Kopf */
.ph-header { border-bottom: var(--ph-rule); background: var(--wp--preset--color--base); }
.ph-header__inner { min-height: 92px; gap: 24px; }
.ph-brand { margin: 0; white-space: nowrap; }
.ph-brand a { display: inline-flex; align-items: center; gap: 14px; color: var(--wp--preset--color--contrast); text-decoration: none; }
.ph-brand a::before { content: ""; width: 40px; height: 40px; flex: none; background: url(../img/mark.svg) center / contain no-repeat; }
.ph-nav { color: var(--wp--preset--color--contrast); }
/* Eigenes Logo (Design → Editor → Kopfbereich → Website-Logo). Ist eines gesetzt, bleibt der Seitentitel nur für Screenreader. */
.ph-logo { margin: 0; flex: none; }
.ph-logo img { display: block; height: auto; max-height: 72px; width: auto; }
.ph-header__inner:has(.ph-logo img) .ph-brand { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ph-nav .wp-block-navigation__container { gap: clamp(18px, 2.4vw, 34px); }
.ph-nav .current-menu-item > a, .ph-nav a[aria-current="page"] { color: var(--wp--preset--color--accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.ph-header__tools { gap: 22px; }
.ph-header__cta { margin: 0; }
.ph-btn-small .wp-block-button__link { padding: .7rem 1.2rem; font-size: .9375rem; }
.ph-btn-accent .wp-block-button__link { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--surface); }
.ph-btn-accent .wp-block-button__link:hover { background: var(--wp--preset--color--contrast); }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { font-size: 1.5rem; gap: 1rem; }

/* --------------------------------------------------------------- Grundlagen */
.wp-site-blocks > .ph-main, .wp-site-blocks > footer { margin-block-start: 0; }
.ph-main { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--ph-section-space); }
.ph-main--flush { padding-top: 0; padding-bottom: 0; }
.ph-main--flush .wp-block-post-content > .alignfull { margin-top: 0; margin-bottom: 0; }
.ph-main--flush .wp-block-post-content > .alignfull + .alignfull { margin-block-start: 0; }
.is-style-ph-kicker { font-family: var(--wp--custom--label--font-family); font-size: .8125rem !important; font-weight: 600; letter-spacing: var(--wp--custom--label--letter-spacing); text-transform: var(--wp--custom--label--text-transform); color: var(--wp--preset--color--accent); margin-bottom: .75rem; }
.ph-muted, .ph-muted a { color: var(--wp--preset--color--muted); }
.ph-more-link { margin: 0; }
.ph-more-link a { font-weight: 600; }
.ph-codelabel { font-family: var(--wp--preset--font-family--mono); font-size: .8125rem; letter-spacing: .02em; color: var(--wp--preset--color--accent); margin-bottom: .75rem; }

.ph-section { padding-top: var(--ph-section-space); padding-bottom: 0; }
.ph-section:last-child { padding-bottom: var(--ph-section-space); }
.ph-section--tight { padding-top: var(--wp--preset--spacing--40); }
.ph-section-head { margin-bottom: var(--wp--preset--spacing--40); gap: 16px; }
.ph-section-head h2 { margin: 0; }
.ph-section-head__note { max-width: 380px; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); margin: 0; }

.ph-pagehead { margin-bottom: var(--wp--preset--spacing--50); }
.ph-pagehead h1 { margin: 0 0 1rem; }
.ph-pagehead__lead { font-size: var(--wp--preset--font-size--large); max-width: 760px; }
.ph-page-title { margin-bottom: var(--wp--preset--spacing--40); }
.ph-chiplinks { display: flex; flex-wrap: wrap; gap: 10px; }
.ph-chiplinks a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--wp--preset--color--line); border-radius: 999px; color: var(--wp--preset--color--contrast); text-decoration: none; font-weight: 500; }
.ph-chiplinks a:hover { border-color: var(--wp--preset--color--contrast); }

/* ------------------------------------------------------------- Aufmacher */
.ph-hero { padding-top: var(--wp--preset--spacing--50); }
.ph-hero__cols { gap: 24px 8%; }
.ph-hero__title { margin: 0 0 1.75rem; }
.ph-hero__title em { color: var(--wp--preset--color--accent); font-style: italic; }
.ph-hero__lead { font-size: var(--wp--preset--font-size--large); line-height: 1.55; max-width: 640px; }
.ph-hero__buttons { margin-top: 2rem; }
.is-style-ph-portrait { margin: 0; }
.is-style-ph-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; background: var(--wp--preset--color--line); }
.is-style-ph-portrait figcaption { margin-top: .75rem; color: var(--wp--preset--color--muted); text-align: left; }

/* ------------------------------------------------------------- Kennzahlen */
.ph-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ph-facts > * { margin: 0 !important; }
.ph-fact { border-top: var(--ph-rule-strong); padding-top: 20px; }
.ph-fact__num { font-family: var(--wp--preset--font-family--display); font-size: clamp(2.25rem, 3.6vw, 3.25rem); font-weight: var(--wp--custom--title--font-weight); line-height: 1; letter-spacing: var(--wp--custom--title--letter-spacing); margin: 0 0 .5rem; }
.ph-fact__text { color: var(--wp--preset--color--muted); font-size: 1rem; line-height: 1.45; margin: 0; }

/* ------------------------------------------------------- Veröffentlicht in */
.ph-logos { border-top: var(--ph-rule); border-bottom: var(--ph-rule); padding: 28px 0; gap: 16px 40px; }
.ph-logos__label { color: var(--wp--preset--color--muted); margin: 0; white-space: nowrap; }
.ph-logos__list { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: 1.375rem; font-weight: 500; word-spacing: .15em; }

/* ------------------------------------------------------------- Leistungen */
.ph-services { gap: 24px; }
.ph-service { border-top: var(--ph-rule-strong); padding-top: 24px; }
.ph-service h3 { font-size: 1.875rem; margin: 0 0 .75rem; }

/* ------------------------------------------------------ Logbuch / Über mich */
.ph-logsplit { gap: 24px 8%; }
.ph-logsplit h2 { margin: 0 0 var(--wp--preset--spacing--40); }
.ph-aside { padding-top: .5rem; }
.ph-aside:not(:has(.ph-pubs)) { display: none; }
.ph-aside__label { color: var(--wp--preset--color--muted); }
.ph-about { border-top: var(--ph-rule-strong); padding-top: var(--wp--preset--spacing--50); gap: 24px; }
.ph-about__quote { font-family: var(--wp--preset--font-family--display); font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.25; margin: 0 0 1.5rem; }

/* ------------------------------------------------------------------ Fuß */
.ph-footer { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--on-dark); padding-top: var(--wp--preset--spacing--60); padding-bottom: 48px; margin-top: 0; }
.ph-footer__cta { gap: 32px; margin-bottom: var(--wp--preset--spacing--60); }
.ph-footer__title { color: var(--wp--preset--color--on-dark); margin: 0; max-width: 780px; font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.02; }
.ph-footer__bottom { border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--on-dark) 18%, transparent); padding-top: 28px; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--on-dark-muted); gap: 16px; }
.ph-footer__bottom p { margin: 0; }
.ph-footer__links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.ph-footer a { color: var(--wp--preset--color--on-dark-muted); }
.ph-footer a:hover { color: var(--wp--preset--color--on-dark); }
.ph-btn-light .wp-block-button__link { background: var(--wp--preset--color--on-dark); color: var(--wp--preset--color--contrast) !important; }
.ph-btn-light.is-style-outline .wp-block-button__link { background: transparent; color: var(--wp--preset--color--on-dark) !important; border: 1.5px solid currentColor; }
.ph-btn-light .wp-block-button__link:hover { background: var(--wp--preset--color--highlight); color: var(--wp--preset--color--contrast) !important; }
.wp-block-button.is-style-outline > .wp-block-button__link { border: 1.5px solid currentColor; background: transparent; color: var(--wp--preset--color--contrast); padding: calc(.95rem - 1.5px) calc(1.6rem - 1.5px); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }

/* ------------------------------------------------------------- Logbuch-Liste */
.ph-loglist .wp-block-post-template { border-top: var(--ph-rule-strong); }
.ph-loglist__item { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 24px; align-items: baseline; padding: 26px 0; border-bottom: var(--ph-rule); }
.ph-loglist__item > * { margin: 0 !important; }
.ph-loglist__title { font-size: 1.75rem; margin: 0 0 .4rem; }
.ph-loglist__title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.ph-loglist__title a:hover { color: var(--wp--preset--color--accent); }
.ph-loglist__excerpt { color: var(--wp--preset--color--muted); }
.ph-loglist__excerpt p { margin: 0; }
.ph-loglist__excerpt .wp-block-post-excerpt__more-text { display: none; }
.ph-loglist__tags { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ph-loglist .wp-block-query-pagination { margin-top: var(--wp--preset--spacing--40); font-weight: 600; }
.ph-terms { font-family: var(--wp--custom--label--font-family); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: var(--wp--custom--label--text-transform); margin: 0; }
.ph-terms a { display: inline-block; padding: 3px 8px; border-radius: 4px; text-decoration: none; margin: 0 4px 4px 0; }
.ph-terms--project a { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
.ph-terms--type a { background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, var(--wp--preset--color--surface)); color: var(--wp--preset--color--contrast); }

/* -------------------------------------------------------------- Einzelbeitrag */
.ph-single__meta { gap: 12px; align-items: center; }
.ph-single__title { font-size: var(--wp--preset--font-size--xx-large); margin-top: 1rem; }
.ph-single__lead { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--muted); }
.ph-single .wp-block-post-featured-image img { border-radius: var(--wp--custom--radius--card); }
.ph-single .ph-projectbox { margin-top: var(--wp--preset--spacing--50); }
.ph-single .post-navigation-link-previous, .ph-single .post-navigation-link-next { font-weight: 600; margin-top: 1rem; }

/* ------------------------------------------------------------- Projektseite */
.ph-breadcrumb { font-size: var(--wp--preset--font-size--small); margin-bottom: 2rem; }
.ph-breadcrumb a { color: var(--wp--preset--color--muted); }
.ph-project__cols { gap: 24px 6%; }
.ph-project__title { font-size: var(--wp--preset--font-size--huge); margin: .75rem 0 1.25rem; }
.ph-project__lead { font-size: clamp(1.25rem, 1.8vw, 1.4375rem); line-height: 1.5; }
.ph-project__lead p { margin: 0; }
.ph-project__image img { border-radius: var(--wp--custom--radius--card); }
.ph-project__content { margin-top: var(--wp--preset--spacing--50) !important; font-size: 1.1875rem; }
.ph-project .ph-section-head { margin-top: var(--wp--preset--spacing--60); }
.ph-project .ph-timeline { margin-bottom: var(--wp--preset--spacing--50); }
.ph-project .ph-projnav { margin-top: var(--wp--preset--spacing--60); }

/* ---------------------------------------------------------- Dunkle Flächen */
.is-style-ph-dark { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--on-dark); }
.is-style-ph-dark :where(h1, h2, h3, h4) { color: var(--wp--preset--color--on-dark); }
.is-style-ph-dark .ph-dim { color: var(--wp--preset--color--on-dark-muted); }
.is-style-ph-dark .ph-codelabel, .is-style-ph-dark .is-style-ph-kicker { color: var(--wp--preset--color--highlight); }
.is-style-ph-dark .ph-hero__lead { color: color-mix(in srgb, var(--wp--preset--color--on-dark) 85%, transparent); }
.is-style-ph-dark a:not(.wp-block-button__link) { color: var(--wp--preset--color--on-dark); }
.ph-hero--tech { padding-bottom: 0; }
.ph-hero--tech .ph-hero__cols { padding-bottom: var(--wp--preset--spacing--50); }
.ph-btn-accent.ph-btn-accent .wp-block-button__link { background: var(--wp--preset--color--highlight); color: var(--wp--preset--color--contrast); }
.is-style-ph-dark .ph-btn-accent .wp-block-button__link:hover { background: var(--wp--preset--color--on-dark); }
.ph-header .ph-btn-accent .wp-block-button__link { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--surface); }
.ph-facts--dark { border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--on-dark) 16%, transparent); gap: 0; padding-bottom: 40px; }
.ph-facts--dark .ph-fact { border-top: 0; padding: 32px 24px 0; border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--on-dark) 16%, transparent); }
.ph-facts--dark .ph-fact:first-child { border-left: 0; padding-left: 0; }
.ph-facts--dark .ph-fact__text { color: var(--wp--preset--color--on-dark-muted); }

/* ------------------------------------------------------------ Panels (B) */
.ph-panels { gap: 24px; }
.ph-panel { background: var(--wp--preset--color--surface); border-radius: calc(var(--wp--custom--radius--card) * 1.5); padding: clamp(28px, 4vw, 48px); }
.ph-panel h2 { font-size: clamp(2rem, 3.2vw, 2.75rem); margin: 0 0 1rem; }
.ph-panel--dark { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--on-dark); }
.ph-panel--dark h2 { color: var(--wp--preset--color--on-dark); }
.ph-panel--dark .ph-muted { color: var(--wp--preset--color--on-dark-muted); }
.ph-panel--dark .ph-codelabel, .ph-panel--dark .ph-more-link a { color: var(--wp--preset--color--highlight); }
.ph-tags { font-family: var(--wp--preset--font-family--mono); font-size: .8125rem; color: var(--wp--preset--color--muted); }
.ph-panel--dark .ph-tags { color: var(--wp--preset--color--on-dark-muted); }

/* ---------------------------------------------------------- Terminseite */
.ph-booking-page__cols { gap: 32px 6%; }
.ph-booking-page__intro { position: sticky; top: 32px; align-self: flex-start; }
.ph-booking-page__title { font-size: var(--wp--preset--font-size--xx-large); margin: 0 0 1.25rem; }
.ph-booking-page__lead { font-size: var(--wp--preset--font-size--large); line-height: 1.5; }
.ph-booking-page__steps { margin: 2rem 0; border-top: var(--ph-rule-strong); }
.ph-step { margin: 0 !important; padding: 16px 0; border-bottom: var(--ph-rule); display: grid; grid-template-columns: 110px 1fr; gap: 12px; color: var(--wp--preset--color--muted); }
.ph-step strong { color: var(--wp--preset--color--contrast); font-family: var(--wp--preset--font-family--display); font-weight: var(--wp--custom--title--font-weight); font-size: 1.125rem; }

/* ------------------------------------------------------------- Mobil */
@media (max-width: 781px) {
	.ph-header__inner { min-height: 68px; }
	.ph-brand a::before { width: 30px; height: 30px; }
	.ph-logo img { max-height: 46px; }
	.ph-header .ph-header__cta { display: none; }
	.ph-header .ph-header__tools { order: 2; margin-left: auto; }
	.ph-header .ph-nav { order: 3; }
	.is-style-ph-portrait { max-width: 300px; }
	.ph-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
	.ph-facts--dark .ph-fact { border-left: 0; padding: 20px 0 0; }
	.ph-loglist__item { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.ph-loglist__tags { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
	.ph-logos { flex-direction: column; align-items: flex-start; }
	.ph-hero__buttons .wp-block-button { width: 100%; }
	.ph-hero__buttons .wp-block-button__link { width: 100%; }
	.ph-booking-page__intro { position: static; }
}