/*
Theme Name: TrauerRaum Spittal
Theme URI: https://www.trauerraum-spittal.at/
Description: Child-Theme für TrauerRaum Spittal auf Basis von Twenty Twenty-Four. Farben nach dem Gedicht „Farben der Trauer“, Schriften Kumbh Sans, DM Sans und Inspiration (lokal eingebunden, SIL Open Font License).
Author: TrauerRaum Spittal
Template: twentytwentyfour
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: trauerraum
*/

/* ---------- Seitenfarben (60 Papier · 20 Hellton · 15 Tinte · 5 Akzent) ---------- */
:root, .tr-farbe-neutral { --tr-hell: #F7F3EC; --tr-akzent: #1F1D1B; --tr-akzent-text: #1F1D1B; }
.tr-farbe-gelb  { --tr-hell: #F6E7C2; --tr-akzent: #E0AE48; --tr-akzent-text: #8A6416; }
.tr-farbe-blau  { --tr-hell: #DCE4EE; --tr-akzent: #36506E; --tr-akzent-text: #36506E; }
.tr-farbe-braun { --tr-hell: #EADFD3; --tr-akzent: #6E5039; --tr-akzent-text: #6E5039; }
.tr-farbe-gruen { --tr-hell: #DFE7DA; --tr-akzent: #557352; --tr-akzent-text: #557352; }
.tr-farbe-rot   { --tr-hell: #F3DFD6; --tr-akzent: #A84A35; --tr-akzent-text: #A84A35; }

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, .wp-block-heading { text-wrap: balance; }
p { text-wrap: pretty; }
:where(.tr-inhalt) > p, :where(.tr-inhalt) > ul, :where(.tr-inhalt) > ol { max-width: 640px; }

/* Fokus sichtbar */
a:focus-visible, button:focus-visible, summary:focus-visible, .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--tinte); outline-offset: 3px;
}

/* ---------- Kopfzeile ---------- */
.tr-kopf { background: var(--tr-hell); }
.tr-logo img { display: block; height: auto; }
.tr-nav a { text-decoration: none; }
.tr-nav a:hover, .tr-nav .current-menu-item > a { text-decoration: underline; text-underline-offset: 6px; }
.tr-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--tr-hell); padding: 1.5rem; }
.tr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-size: 1.375rem; }
.wp-block-navigation__responsive-container-open svg, .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; }

/* ---------- Typo-Bausteine ---------- */
.tr-label, .is-style-label {
	font-family: var(--wp--preset--font-family--titel);
	font-weight: 300; font-size: 0.8125rem; line-height: 1.4;
	letter-spacing: 0.28em; text-transform: uppercase;
	color: var(--tr-akzent-text);
	margin-bottom: 0.5rem !important;
}
.tr-akzent { color: var(--tr-akzent-text); font-weight: 300; }
.tr-display { font-size: var(--wp--preset--font-size--display) !important; line-height: 1.07 !important; letter-spacing: -0.01em; margin-top: 0 !important; }
.tr-lead { font-size: var(--wp--preset--font-size--lead); line-height: 1.6; }
.tr-hand { font-family: var(--wp--preset--font-family--hand); font-size: var(--wp--preset--font-size--hand); line-height: 1.15; }

/* ---------- Abschnitte ---------- */
.tr-hero { background: var(--tr-hell); }
.is-style-hellton { background: var(--tr-hell); }
.tr-abschnitt { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }
.tr-inhalt > .tr-hero:first-child { margin-top: 0; }
.tr-inhalt > *:last-child { margin-bottom: 0; }
.tr-main .tr-inhalt { padding-bottom: 0; }

/* ---------- Buttons: rechteckig, keine Pillen ---------- */
.wp-block-button__link { border-radius: 3px !important; }
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent !important; color: var(--wp--preset--color--tinte) !important;
	border: 1.5px solid var(--wp--preset--color--tinte) !important;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: rgba(31, 29, 27, 0.06) !important; }
.tr-mehr a {
	font-family: var(--wp--preset--font-family--titel); font-size: 0.8125rem; letter-spacing: 0.28em;
	text-transform: uppercase; text-underline-offset: 5px;
}

/* ---------- Offenes Quadrat (Bildstil) ---------- */
.wp-block-image.is-style-offenes-quadrat { position: relative; padding: 8% 0 0 8%; margin-left: 0; margin-right: 0; }
.wp-block-image.is-style-offenes-quadrat img { position: relative; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 0; }
.wp-block-image.is-style-offenes-quadrat::before {
	content: ""; position: absolute; z-index: 2; pointer-events: none;
	left: 0; top: 0; width: 86%; height: 86%;
	border: 3px solid var(--wp--preset--color--tinte); border-right: 0; box-sizing: border-box;
}
.wp-block-image.is-style-offenes-quadrat::after {
	content: ""; position: absolute; z-index: 2; pointer-events: none;
	left: calc(86% - 3px); top: 0; width: 3px; height: 86%;
	background: linear-gradient(to bottom, var(--wp--preset--color--tinte) 0 26%, transparent 26% 88%, var(--wp--preset--color--tinte) 88% 100%);
}
.wp-block-image.is-style-offenes-quadrat figcaption { position: relative; z-index: 1; }

/* Zitat im offenen Quadrat */
.is-style-zitat-rahmen { position: relative; padding: 2.5rem 3.5rem 2.5rem 2.5rem !important; }
.is-style-zitat-rahmen::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	border: 3px solid var(--wp--preset--color--tinte); border-right: 0;
}
.is-style-zitat-rahmen::after {
	content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 3px; pointer-events: none;
	background: linear-gradient(to bottom, var(--wp--preset--color--tinte) 0 26%, transparent 26% 88%, var(--wp--preset--color--tinte) 88% 100%);
}

/* ---------- Kacheln ---------- */
.is-style-kachel {
	background: var(--wp--preset--color--weiss); border-radius: 24px;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) !important;
	height: 100%;
}
.is-style-kachel > h3::before {
	content: ""; display: block; width: 18px; height: 18px;
	background: var(--tr-akzent); margin-bottom: 0.9rem;
}
.is-style-kachel p { font-size: var(--wp--preset--font-size--klein); line-height: 1.6; color: var(--wp--preset--color--tinte-gedaempft); }
.is-style-kachel .tr-mehr { color: var(--wp--preset--color--tinte); margin-top: auto; }
.tr-kacheln > .wp-block-column { display: flex; }
.tr-kacheln > .wp-block-column > .is-style-kachel { flex: 1; display: flex; flex-direction: column; }

/* ---------- Schritte (So läuft ein Abend ab) ---------- */
.tr-schritte { counter-reset: schritt; }
.tr-schritte h3 { counter-increment: schritt; }
.tr-schritte h3::before {
	content: "Schritt " counter(schritt); display: block;
	font-family: var(--wp--preset--font-family--titel); font-weight: 300; font-size: 0.8125rem;
	letter-spacing: 0.28em; text-transform: uppercase; color: var(--tr-akzent-text); margin-bottom: 0.4rem;
}

/* ---------- FAQ ---------- */
.tr-faq { border-top: 1px solid var(--wp--preset--color--linie); }
.tr-faq .wp-block-details { border-bottom: 1px solid var(--wp--preset--color--linie); padding: 1.1rem 0; margin: 0 !important; }
.tr-faq .wp-block-details summary {
	list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem;
	font-family: var(--wp--preset--font-family--titel); font-weight: 500; font-size: 1.25rem; line-height: 1.4;
}
.tr-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.tr-faq .wp-block-details summary::after { content: "+"; font-weight: 300; font-size: 1.75rem; line-height: 1; flex: none; }
.tr-faq .wp-block-details[open] summary::after { content: "–"; }
.tr-faq .wp-block-details > p { margin-top: 0.75rem; max-width: 640px; }

/* ---------- Porträts ---------- */
.tr-person h3 { margin-bottom: 0.2rem; }
.tr-person .tr-rolle { color: var(--wp--preset--color--tinte-gedaempft); font-size: var(--wp--preset--font-size--klein); margin-top: 0; }
.tr-person blockquote { margin: 1rem 0 0; padding: 0; border: 0; font-style: normal; }
.tr-person blockquote p { font-size: var(--wp--preset--font-size--normal); }

/* ---------- Termine ---------- */
.tr-termine { list-style: none; padding: 0 !important; margin: 0; border-top: 1px solid var(--wp--preset--color--linie); max-width: 640px; }
.tr-termine li {
	padding: 0.85rem 0; border-bottom: 1px solid var(--wp--preset--color--linie);
	font-family: var(--wp--preset--font-family--titel); font-size: 1.25rem;
	display: flex; gap: 1rem; align-items: baseline; font-variant-numeric: tabular-nums;
}
.tr-termine li::before { content: ""; width: 12px; height: 12px; background: var(--tr-akzent); flex: none; align-self: center; }
.tr-termine li:first-child { font-weight: 500; }

/* Formular-Platzhalter */
.tr-formular { background: var(--wp--preset--color--weiss); padding: var(--wp--preset--spacing--40) !important; }

/* ---------- Footer ---------- */
.tr-streifen {
	height: 6px; margin: 0 !important;
	background: linear-gradient(90deg, #A84A35 0 20%, #36506E 20% 40%, #6E5039 40% 60%, #E0AE48 60% 80%, #557352 80% 100%);
}
.tr-fuss { background: var(--wp--preset--color--tinte); color: var(--wp--preset--color--papier); margin-top: 0 !important; }
.tr-fuss a { color: var(--wp--preset--color--papier); }
.tr-fuss a:focus-visible { outline-color: var(--wp--preset--color--papier); }
.tr-leitsatz { font-family: var(--wp--preset--font-family--titel); font-weight: 300; font-size: var(--wp--preset--font-size--titel-l); line-height: 1.25; margin-top: 0; }
.tr-fuss-neben, .tr-fuss-links { color: #CFC8BD; font-size: var(--wp--preset--font-size--klein); line-height: 1.7; }
.tr-fuss-links a { margin-right: 1.5rem; }
.tr-krise { border: 1px solid #CFC8BD; padding: 1.25rem 1.5rem; font-size: var(--wp--preset--font-size--klein); }
.tr-krise .tr-label { color: #CFC8BD; }
.tr-krise strong { font-family: var(--wp--preset--font-family--titel); font-weight: 500; font-size: 1.375rem; }
.tr-footer-part, .tr-main { margin-top: 0 !important; }

/* ---------- Mobil ---------- */
@media (max-width: 781px) {
	.tr-hero .wp-block-columns { gap: 2rem; }
	.tr-hero .is-style-offenes-quadrat { max-width: 340px; }
	.tr-fuss-spalten { gap: 1.5rem !important; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

/* Gedichtzeile pro Seite (tr-gedicht) */
.wp-block-quote.tr-gedicht{border:0;margin:0 auto;max-width:680px;padding:0;text-align:center}
.wp-block-quote.tr-gedicht::before{content:"";display:block;width:30px;height:30px;margin:0 auto 1.25rem;border:2px solid var(--tr-akzent,#1F1D1B);border-right-color:transparent}
.wp-block-quote.tr-gedicht p{font-family:var(--wp--preset--font-family--titel);font-size:var(--wp--preset--font-size--titel-m);font-weight:300;line-height:1.4;margin:0}
.wp-block-quote.tr-gedicht cite{display:block;margin-top:1rem;font-size:var(--wp--preset--font-size--klein);font-style:normal;letter-spacing:.04em;color:var(--wp--preset--color--tinte-gedaempft)}

/* Erinnerungs-Formular (Brevo, ohne externe Skripte) */
.tr-erinnerung-form{display:grid;gap:.75rem;max-width:540px;position:relative}
.tr-erinnerung-form label{font-weight:500}
.tr-erinnerung-form input[type=email]{font:inherit;padding:.8rem 1rem;border:1px solid var(--wp--preset--color--tinte);border-radius:3px;background:var(--wp--preset--color--weiss,#fff);color:inherit}
.tr-erinnerung-form input[type=email]:focus{outline:2px solid var(--tr-akzent);outline-offset:2px}
.tr-erinnerung-form .tr-check{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;font-size:var(--wp--preset--font-size--klein)}
.tr-erinnerung-form .tr-check input{margin-top:.3rem;accent-color:var(--tr-akzent)}
.tr-erinnerung-form button{justify-self:start;cursor:pointer}
.tr-erinnerung-form [data-status]{padding:1rem 1.25rem;background:var(--tr-hell);margin:0}
.tr-erinnerung-form .tr-honig{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.tr-erinnerung-form .tr-klein{font-size:var(--wp--preset--font-size--klein);color:var(--wp--preset--color--tinte-gedaempft);margin:0}