/* ===================================================================
   NightOwl Book CMS — static-Page chrome
   Header + footer styling for the [nightowl_header] / [nightowl_footer]
   shortcodes. Enqueued only on Pages that contain one of them.

   These rules are lifted verbatim from the approved Page #967 inline
   <style> (Phase 12C-1 pilot) so the rendered header/footer is
   unchanged. Colours, borders, the display font stack and the gold
   gradient come from nightowl-design-system.css tokens (Phase 12D),
   which is always enqueued as a dependency of this sheet. One local
   literal is kept on purpose: .nob-cta keeps its 2-part "Arial,
   sans-serif" stack (unchanged from the approved Page).

   Class selectors only — no bare element selectors, no @font-face, no
   external requests. Distinct from the compact plugin-template chrome
   in nightowl-plugin-chrome.css (.noch-*).
   NightOwl palette: #030303 #090909 #c8942f #edc36b #eee3cf #a99c87
   =================================================================== */

/* --- Full static-Page header --- */
.nob-header { height: 110px; background: var(--nightowl-black); border-bottom: 1px solid var(--nightowl-gold-border); display: flex; align-items: center; justify-content: space-between; padding: 0 48px; }
.nob-header-brand { width: 150px; height: 110px; display: flex; align-items: center; justify-content: flex-start; overflow: visible; flex-shrink: 0; }
.nob-header-brand img { display: block; width: 74px; height: 74px; object-fit: contain; transform: none; transform-origin: left center; }
.nob-nav { display:flex; align-items:center; gap: 40px; }
.nob-nav a { color: var(--nightowl-gold-light); font-family: var(--nightowl-font-display); font-weight: 400; font-size: 22px; letter-spacing: 0.5px; position: relative; padding-bottom: 6px; }
.nob-nav a.active { position: relative; }
.nob-nav a.active::after { content: ""; position: absolute; left: 50%; bottom: -12px; width: 36px; height: 1px; background: var(--nightowl-gold); transform: translateX(-50%); }
.nob-cta { display:inline-flex; align-items:center; justify-content:center; gap:8px; width: 266px; height: 54px; background: transparent; border: 1px solid var(--nightowl-gold); border-radius: 5px; color: var(--nightowl-gold-light); font-family: Arial, sans-serif; font-weight: 500; font-size: 15px; letter-spacing: 1px; transition: background 0.2s ease, color 0.2s ease; flex-shrink: 0; }
.nob-cta:hover { background: var(--nightowl-gold); color:#000; }
.nob-nav a:not(.active) { transition: color 0.25s ease; position: relative; }
.nob-nav a:not(.active)::after { content:""; position:absolute; left:50%; bottom:-12px; width:0; height:1px; background:var(--nightowl-gold); transform: translateX(-50%); transition: width 0.3s ease; }
.nob-nav a:not(.active):hover::after { width:30px; }
.nob-nav a:not(.active):hover { color:#fff; }
.nob-nav a, .nob-nav a:link, .nob-nav a:visited, .nob-nav a:active, .nob-nav a:focus { color: var(--nightowl-gold-light) !important; }
.nob-nav a:not(.active):hover { color: #fff !important; }
.nob-nav a.active { color: var(--nightowl-gold-light) !important; }
.nob-cta, .nob-cta:link, .nob-cta:visited, .nob-cta:active, .nob-cta:focus { color: var(--nightowl-gold-light) !important; }
.nob-cta:hover { color: #000 !important; }

/* --- Shared responsive header (the header-only half of the mixed @media
   blocks that each approved Page kept inline; needed here so Pages whose
   original prefix was not .nob- still wrap the shared header on mobile) --- */
@media (max-width: 1024px) {
	.nob-header, .nob-header-brand { padding: 0 24px; }
	.nob-header-brand { width: 90px; }
	.nob-nav { gap: 20px; }
}
@media (max-width: 640px) {
	.nob-header { flex-wrap: wrap; height: auto; padding: 16px; gap: 12px; }
	.nob-nav { flex-wrap: wrap; justify-content: center; gap: 14px; order: 3; width: 100%; }
	.nob-cta { order: 2; }
}

/* --- Large static-Page footer --- */
.nightowl-global-footer { width:100%; background: var(--nightowl-black); border-top: 1px solid var(--nightowl-gold-border); padding: 56px 24px 0 24px; box-sizing: border-box; }
.nightowl-global-footer-inner { max-width: 1180px; margin: 0 auto; }
/* Four visible columns (brand · Navigation · Rechtliches · Folge uns) now
   that Phase LEGAL-2B unhides the Rechtliches column — an explicit 4-track
   template keeps all four on one row instead of the 3-track template
   wrapping the 4th item onto its own line. */
.nightowl-global-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 0.8fr 0.8fr; gap: 56px; padding-bottom: 44px; align-items: start; }
.nightowl-global-footer-col { min-width: 0; border: 0; }
.nightowl-global-footer-brand { display: flex; flex-direction: column; align-items: flex-start; }
.nightowl-global-footer-logo { width: 46px; height: 46px; object-fit: contain; margin-bottom: 14px; }
.nightowl-global-footer-brand-name { color: var(--nightowl-gold-light); font-size: 16px; margin: 0 0 8px 0; }
.nightowl-global-footer-tagline { color: var(--nightowl-muted); font-size: 13px; line-height: 1.5; margin: 0; }
.nightowl-global-footer-heading { color: var(--nightowl-gold); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; font-weight: 400; margin: 0 0 16px 0; }
.nightowl-global-footer-nav { list-style: none; margin: 0; padding: 0; }
.nightowl-global-footer-nav li { margin-bottom: 10px; }
.nightowl-global-footer-nav a, .nightowl-global-footer-nav a:link, .nightowl-global-footer-nav a:visited { color: var(--nightowl-gold-light) !important; font-size: 14px; text-decoration: none !important; transition: color 0.25s ease; }
.nightowl-global-footer-nav a:hover { color: #fff !important; }
/* Phase LEGAL-2B: /impressum/ and /datenschutz/ now exist, so this column
   (Impressum + Datenschutz links, markup unchanged) is no longer hidden. */
.nightowl-global-footer-social { display: flex; align-items: center; gap: 22px; }
.nightowl-global-footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--nightowl-gold-light); transition: transform 0.25s ease, color 0.25s ease; }
.nightowl-global-footer-social a svg { width: 26px; height: 26px; }
.nightowl-global-footer-social a:hover { color: #fff; transform: translateY(-2px); }
.nightowl-global-footer-bottom { border-top: 1px solid var(--nightowl-gold-border); padding: 20px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.nightowl-global-footer-bottom p { margin: 0; color: var(--nightowl-muted); font-size: 13px; }
@media (max-width: 1024px) { .nightowl-global-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; } }
@media (max-width: 640px) { .nightowl-global-footer { padding-top: 40px; } .nightowl-global-footer-grid { grid-template-columns: 1fr; text-align: center; } .nightowl-global-footer-brand { align-items: center; } .nightowl-global-footer-social { justify-content: center; } .nightowl-global-footer-bottom { flex-direction: column; text-align: center; } }

/* --- Keyboard focus for the shared chrome (Phase 13B) --- */
.nob-header .nob-header-brand:focus-visible,
.nob-nav a:focus-visible,
.nob-cta:focus-visible,
.nightowl-global-footer-nav a:focus-visible,
.nightowl-global-footer-social a:focus-visible {
	outline: 2px solid var(--nightowl-focus-ring);
	outline-offset: 3px;
	border-radius: var(--nightowl-radius-focus);
}

/* --- Respect reduced motion for shared chrome transitions only --- */
@media (prefers-reduced-motion: reduce) {
	.nob-nav a,
	.nob-nav a:not(.active),
	.nob-nav a:not(.active)::after,
	.nob-cta,
	.nightowl-global-footer-nav a,
	.nightowl-global-footer-social a {
		transition: none;
	}
}

/* ===================================================================
   Phase LEGAL-2B — Legal pages (Impressum / Datenschutz)
   One shared shell for both IT-Recht Kanzlei connector pages, scoped
   via body:has(.nol-page-shell) so a single block serves both pages
   without hardcoding either page ID. Mirrors the same Astra-neutralising
   resets every other full-bleed static Page already carries. The legal
   text itself is rendered by the connector's [agb_imprint]/[agb_privacy]
   shortcodes — only generic, defensive prose rules are applied to
   .agb_content; no assumption is made about the connector's inner HTML.
   =================================================================== */
body:has(.nol-page-shell) { margin: 0 !important; padding: 0 !important; background: var(--nightowl-black) !important; overflow-x: hidden !important; }
body:has(.nol-page-shell) .site-content, body:has(.nol-page-shell) .ast-container, body:has(.nol-page-shell) .content-area, body:has(.nol-page-shell) .site-main, body:has(.nol-page-shell) .entry-content, body:has(.nol-page-shell) #content, body:has(.nol-page-shell) .ast-page-builder-template .site-content { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
body:has(.nol-page-shell) .ast-separate-container .ast-article-single, body:has(.nol-page-shell) .ast-separate-container .entry-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has(.nol-page-shell) #masthead, body:has(.nol-page-shell) .site-header, body:has(.nol-page-shell) .ast-header-bar-navigation, body:has(.nol-page-shell) .ast-mobile-header-wrap, body:has(.nol-page-shell) header.site-header, body:has(.nol-page-shell) .ast-above-header, body:has(.nol-page-shell) .ast-above-header-bar { display: none !important; }
body:has(.nol-page-shell) #footer, body:has(.nol-page-shell) .site-footer, body:has(.nol-page-shell) footer.site-footer, body:has(.nol-page-shell) .ast-footer-overlay, body:has(.nol-page-shell) .ast-small-footer, body:has(.nol-page-shell) .ast-small-footer-section { display: none !important; }
body:has(.nol-page-shell) .entry-header, body:has(.nol-page-shell) .page-header, body:has(.nol-page-shell) .entry-title, body:has(.nol-page-shell) .ast-single-entry-header, body:has(.nol-page-shell) h1.entry-title, body:has(.nol-page-shell) .ast-archive-title { display: none !important; }
body:has(.nol-page-shell) #secondary, body:has(.nol-page-shell) .ast-sidebar, body:has(.nol-page-shell) .widget-area { display: none !important; }

.nol-page-shell { width: 100%; background: var(--nightowl-black); color: var(--nightowl-cream); font-family: var(--nightowl-font-body); overflow-x: hidden; box-sizing: border-box; }
.nol-page-shell * { box-sizing: border-box; }

.nol-hero { padding: 72px 24px 48px; text-align: center; }
.nol-kicker { font-family: var(--nightowl-font-ui); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--nightowl-gold); margin: 0 0 16px; }
.nol-heading { font-family: var(--nightowl-font-display); font-weight: 400; font-size: clamp(34px, 5vw, 52px); color: var(--nightowl-gold-light); margin: 0 0 16px; }
.nol-intro { font-family: var(--nightowl-font-body); font-size: 16px; line-height: 1.7; color: var(--nightowl-muted); max-width: 620px; margin: 0 auto; }
.nol-divider { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; max-width: 200px; margin: 28px auto 0; }
.nol-divider .line { height: 1px; flex: 1; background: var(--nightowl-gold-border); }
.nol-divider img { height: 56px; width: auto; }

.nol-content-section { padding: 8px 24px 96px; }
.nol-content-inner { max-width: 760px; margin: 0 auto; background: var(--nightowl-black-soft); border: 1px solid var(--nightowl-gold-border-soft); border-radius: var(--nightowl-radius-card); padding: clamp(28px, 5vw, 56px); }

.nol-content-inner .agb_content { font-family: var(--nightowl-font-body); font-size: 16px; line-height: 1.75; color: var(--nightowl-cream); }
.nol-content-inner .agb_content > *:first-child { margin-top: 0; }
.nol-content-inner .agb_content h1, .nol-content-inner .agb_content h2, .nol-content-inner .agb_content h3, .nol-content-inner .agb_content h4 { font-family: var(--nightowl-font-display); font-weight: 400; color: var(--nightowl-gold-light); line-height: 1.3; margin: 1.5em 0 0.6em; }
.nol-content-inner .agb_content h1 { font-size: 1.7em; }
.nol-content-inner .agb_content h2 { font-size: 1.4em; }
.nol-content-inner .agb_content h3 { font-size: 1.15em; }
.nol-content-inner .agb_content p { margin: 0 0 1.1em; }
.nol-content-inner .agb_content ul, .nol-content-inner .agb_content ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.nol-content-inner .agb_content li { margin: 0 0 0.4em; }
.nol-content-inner .agb_content a { color: var(--nightowl-gold-light); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; }
.nol-content-inner .agb_content a:hover { color: #fff; }
.nol-content-inner .agb_content a:focus-visible { outline: 2px solid var(--nightowl-focus-ring); outline-offset: 3px; border-radius: var(--nightowl-radius-focus); }
.nol-content-inner .agb_content strong, .nol-content-inner .agb_content b { color: var(--nightowl-cream); font-weight: 600; }
.nol-content-inner .agb_content hr { border: 0; border-top: 1px solid var(--nightowl-gold-border-soft); margin: 2em 0; }
.nol-content-inner .agb_content table { width: 100%; border-collapse: collapse; margin: 0 0 1.1em; font-size: 0.95em; }
.nol-content-inner .agb_content table th, .nol-content-inner .agb_content table td { border: 1px solid var(--nightowl-gold-border-soft); padding: 8px 12px; text-align: left; }

@media (max-width: 640px) {
	.nol-hero { padding: 48px 20px 32px; }
	.nol-content-section { padding: 8px 16px 64px; }
	.nol-content-inner { padding: 28px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.nol-content-inner .agb_content a { transition: none; }
}


/* ===================================================================
   Phase HOME-DESKTOP-READABILITY 2026-09-18
   Improves large-screen hierarchy without changing tablet/mobile layout.
   =================================================================== */
@media (min-width: 1025px) {
	.nob-nav a { font-size: 24px; }
	body.page-id-966 .noh-kicker { font-size: 18px; }
	body.page-id-966 .noh-desc { font-size: 21px; line-height: 1.5; }
	body.page-id-966 .no-quote-text { font-size: 22px; line-height: 1.45; }
	body.page-id-966 .no-quote-author { font-size: 18px; }
}

@media (min-width: 1301px) {
	body.page-id-966 .noh-author-inner {
		max-width: 1500px;
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
		gap: 64px;
	}
	body.page-id-966 .noh-author-photo img { max-width: 680px; }
	body.page-id-966 .noh-author-heading { font-size: 48px; }
	body.page-id-966 .noh-author-text p { font-size: 19px; line-height: 1.6; }
}


/* ===================================================================
   Phase LARGE-DESKTOP-FOOTER-SCALE 2026-09-18
   Uses available large-screen width and restores visual hierarchy.
   =================================================================== */
@media (min-width: 1301px) {
	body.page-id-966 .no-quote-panel { padding: 48px 36px; }
	body.page-id-966 .no-quote-text { font-size: 26px; line-height: 1.45; }
	body.page-id-966 .no-quote-author { font-size: 20px; line-height: 1.3; }

	.nightowl-global-footer { padding: 72px 40px 0; }
	.nightowl-global-footer-inner { max-width: 1560px; }
	.nightowl-global-footer-grid {
		grid-template-columns: 1.45fr 1fr 0.9fr 0.9fr;
		gap: 72px;
		padding-bottom: 60px;
	}
	.nightowl-global-footer-logo {
		width: 72px;
		height: 72px;
		margin-bottom: 18px;
	}
	.nightowl-global-footer-brand-name { font-size: 20px; margin-bottom: 10px; }
	.nightowl-global-footer-tagline { font-size: 16px; line-height: 1.6; }
	.nightowl-global-footer-heading { font-size: 16px; margin-bottom: 20px; }
	.nightowl-global-footer-nav li { margin-bottom: 12px; }
	.nightowl-global-footer-nav a,
	.nightowl-global-footer-nav a:link,
	.nightowl-global-footer-nav a:visited { font-size: 17px; }
	.nightowl-global-footer-social { gap: 24px; }
	.nightowl-global-footer-social a { width: 54px; height: 54px; }
	.nightowl-global-footer-social a svg { width: 34px; height: 34px; }
	.nightowl-global-footer-bottom { padding: 24px 0; }
	.nightowl-global-footer-bottom p { font-size: 15px; }
}


/* ===================================================================
   Phase AUTHOR-PORTRAIT-SCALE 2026-09-18
   Gives the portrait more presence while preserving the library scene.
   =================================================================== */
@media (min-width: 1301px) {
	body.page-id-968 .noa-photo-col img {
		width: 100%;
		max-width: 560px;
	}
	body.page-id-968 .noa-photo-caption {
		font-size: 18px;
		line-height: 1.4;
		letter-spacing: 1.2px;
		margin-top: 18px;
	}
}