/* RAUSZEIT – eigenständiges Farb-/Typografieschema, gescoped auf .rauszeit-page */

@font-face {
	font-family: 'Source Serif 4';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('../fonts/sourceserif4-variable.woff2') format('woff2');
}
@font-face {
	font-family: 'Source Serif 4';
	font-style: italic;
	font-weight: 300 600;
	font-display: swap;
	src: url('../fonts/sourceserif4-italic-variable.woff2') format('woff2');
}
@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/atkinson-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/atkinson-bold.woff2') format('woff2');
}
@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/atkinson-italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Pinyon Script';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/pinyon-script-regular.woff2') format('woff2');
}

/* Eye-catcher accent: a handful of hand-picked words in the biggest headings get
   a fine script flourish instead of plain italic, in the same green as the
   MOKOWELL wordmark. Used sparingly, not on every emphasis. */
.rz-flourish {
	font-family: 'Pinyon Script', cursive;
	font-style: normal;
	font-weight: 400;
	font-size: 1.5em;
	line-height: 1;
	color: var(--rz-mokowell-text, #177A5C);
	display: inline-block;
	padding-right: 0.18em;
	margin-left: 0.05em;
}
/* Same flourish, lightened for use over the dark-blue sections (the plain
   MOKOWELL green fails contrast there; this keeps the same hue, just brighter). */
.rz-flourish-light { color: #7FB5A5; }

.rauszeit-page {
	--rz-cream: #F8F4EE;
	--rz-white: #FFFFFF;
	--rz-ink: #293031;
	--rz-blue: #203F43;
	--rz-sand: #E4D5C3;
	--rz-sand-2: #F1E9DB;
	--rz-terracotta: #884B3D;
	--rz-line: #D8D0C6;
	--rz-card-border: #E4DED2;
	--rz-muted: #6a6f70;
	--rz-mokowell: #1A8867;
	--rz-mokowell-text: #177A5C;
	--rz-mokowell-sage: #819E40;

	background: var(--rz-cream);
	color: var(--rz-ink);
	font-family: 'Atkinson Hyperlegible', system-ui, sans-serif;
	font-size: 19px;
	line-height: 1.6;
}
.rauszeit-page * { box-sizing: border-box; }
/* This page's blocks (skip-link, main, footer) are hand-styled top to bottom;
   WordPress's default 24px gap between top-level site blocks would otherwise
   show up as a stray cream strip between the last section and the footer. */
.rauszeit-page .wp-site-blocks > * { margin-block-start: 0 !important; }
.rauszeit-page h1, .rauszeit-page h2, .rauszeit-page h3 {
	font-family: 'Source Serif 4', serif;
	font-weight: 400;
	color: var(--rz-blue);
	margin: 0;
}
/* Section headings use the Light cut of the same self-hosted variable font for
   the softer look of the original design (no new/external font involved). */
.rauszeit-page h2 { font-weight: 300; }
.rauszeit-page em { font-style: italic; }
.rauszeit-page a { color: var(--rz-blue); }
.rauszeit-page a:hover { color: var(--rz-terracotta); }
/* Buttons default to cream text (their background is dark by default); an inline
   color on an individual button still wins over this, since inline style always
   beats any external stylesheet rule regardless of selector specificity. */
.rauszeit-page .wp-block-button__link,
.rauszeit-page .rz-btn { color: var(--rz-cream); }
.rauszeit-page .wp-block-button__link:hover,
.rauszeit-page .rz-btn:hover { color: var(--rz-cream); }
.rauszeit-page ::selection { background: var(--rz-mokowell); color: var(--rz-cream); }

.rz-eyebrow {
	font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
	color: var(--rz-terracotta); font-weight: 700; margin: 0 0 20px;
}
.rz-section { padding: 88px 8vw; }
.rz-wrap { max-width: 1200px; margin: 0 auto; }
.rz-wrap-narrow { max-width: 800px; margin: 0 auto; }

.rz-btn {
	display: inline-block; background: var(--rz-blue); color: var(--rz-cream);
	text-decoration: none; padding: 16px 30px; border-radius: 999px;
	font-size: 17px; font-weight: 700; border: none; cursor: pointer;
	transition: transform .25s ease, box-shadow .25s ease;
}
.rz-btn:hover { transform: translateY(-2px); color: var(--rz-cream); box-shadow: 0 16px 32px -16px rgba(32,63,67,.6); }
.rz-btn.rz-btn-light { background: var(--rz-cream); color: var(--rz-blue); }

/* Magnetic buttons: JS nudges them a few px toward the cursor; this transition
   just smooths that out and resets it when the pointer leaves. */
.rz-magnetic { transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease; will-change: transform; }

/* Subtle diagonal shine sweep on hover, pure CSS. */
.wp-block-button__link, .rz-btn {
	position: relative; overflow: hidden;
}
.wp-block-button__link::before, .rz-btn::before {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
	transform: translateX(-120%); pointer-events: none;
}
.wp-block-button__link:hover::before, .rz-btn:hover::before {
	transform: translateX(120%);
	transition: transform .7s ease;
}

/* Photos: gentle zoom on hover, clipped to the rounded frame. */
.rz-photo { overflow: hidden; }
.rz-photo img { transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.rz-photo:hover img { transform: scale(1.05); }

/* Section reveal: whole sections fade/rise into place as they enter the viewport. */
.rauszeit-page .entry-content > section {
	opacity: 0; transform: translateY(28px);
	transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.rauszeit-page .entry-content > section.rz-in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.rz-magnetic { transition: none !important; }
	.wp-block-button__link::before, .rz-btn::before { display: none; }
	.rz-photo img { transition: none; }
	.rauszeit-page .entry-content > section { opacity: 1; transform: none; transition: none; }
}
html[data-rz-reduce-motion="true"] .rz-magnetic { transform: none !important; transition: none !important; }
html[data-rz-reduce-motion="true"] .wp-block-button__link::before,
html[data-rz-reduce-motion="true"] .rz-btn::before { display: none; }
html[data-rz-reduce-motion="true"] .rz-photo img { transition: none; }
html[data-rz-reduce-motion="true"] .rauszeit-page .entry-content > section {
	opacity: 1 !important; transform: none !important; transition: none !important;
}

/* Underline-reveal link: short line by default, grows to the full text width on hover/focus. */
.rz-linkbtn { position: relative; display: inline-block; }
.rz-linkbtn::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px;
	background: currentColor; transform: scaleX(.4); transform-origin: left;
	transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.rz-linkbtn:hover::after, .rz-linkbtn:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .rz-linkbtn::after { transition: none; } }
html[data-rz-reduce-motion="true"] .rz-linkbtn::after { transition: none; }

.rz-card {
	background: #FAF3E8; border: 1px solid var(--rz-card-border);
	border-radius: 20px; padding: 32px 28px;
	position: relative; overflow: hidden; height: 100%; box-sizing: border-box;
	display: flex; flex-direction: column;
}
.rz-card-dot {
	position: absolute; right: -30px; bottom: -30px; width: 120px; height: 120px;
	border-radius: 50%; background: var(--rz-sand-2); opacity: .6; pointer-events: none;
	z-index: 0;
}
.rz-card-num {
	position: absolute; top: 14px; right: 22px; z-index: 0;
	font-family: 'Source Serif 4', serif; font-style: italic; font-weight: 300;
	font-size: 56px; line-height: 1; color: var(--rz-sand); pointer-events: none;
}
.rz-card > *:not(.rz-card-dot):not(.rz-card-num) { position: relative; z-index: 1; }

/* Section variants matching the client's design tokens */
.rz-section-cream { background: var(--rz-cream); }
.rz-section-sand { background: var(--rz-sand-2); }
.rz-section-blue { background: var(--rz-blue); color: var(--rz-cream); }
.rz-section-blue h2, .rz-section-blue h3 { color: var(--rz-cream); }
.rz-section-sand-solid { background: var(--rz-sand); }

.rz-facts { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 15px; color: var(--rz-muted); }
.rz-facts li { display: flex; align-items: center; gap: 10px; }
.rz-facts li::before { content: ''; width: 6px; height: 6px; background: var(--rz-terracotta); border-radius: 50%; }

.rz-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rz-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.rz-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }

.rz-faq details { background: var(--rz-white); border: 1px solid var(--rz-card-border); border-radius: 16px; padding: 4px 8px; margin-bottom: 12px; }
.rz-faq summary { cursor: pointer; padding: 20px; font-family: 'Source Serif 4', serif; font-size: 20px; color: var(--rz-blue); list-style: none; }
.rz-faq summary::-webkit-details-marker { display: none; }
.rz-faq summary::after { content: '+'; float: right; }
.rz-faq details[open] summary::after { content: '–'; }
.rz-faq details > div { padding: 0 20px 20px; color: #3a4142; }

/* Outer gate: the FAQ list itself only appears after this is opened. */
.rz-faq-gate { text-align: center; }
.rz-faq-gate > summary {
	cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 12px;
	background: var(--rz-white); color: var(--rz-blue); border: 1px solid var(--rz-line);
	padding: 18px 32px; border-radius: 999px; font-size: 17px; font-weight: 700;
}
.rz-faq-gate > summary::-webkit-details-marker { display: none; }
.rz-faq-gate > summary::after {
	content: '+'; display: inline-flex; width: 26px; height: 26px; border-radius: 50%;
	background: var(--rz-sand-2); align-items: center; justify-content: center; font-size: 16px;
}
.rz-faq-gate[open] > summary::after { content: '–'; }
.rz-faq-gate .rz-faq { text-align: left; margin-top: 16px; }

@media (max-width: 900px) {
	.rauszeit-page { font-size: 18px; }
	.rz-section { padding: 56px 6vw; }
	.rz-grid-3, .rz-grid-4, .rz-grid-2 { grid-template-columns: 1fr; gap: 20px; }
}

/* Access panel */
.rz-a11y-btn {
	position: fixed; left: 24px; bottom: 24px; width: 56px; height: 56px;
	border-radius: 50%; background: var(--rz-blue, #203F43); color: #fff; border: none;
	cursor: pointer; z-index: 100; display: flex; align-items: center; justify-content: center;
	box-shadow: 0 16px 32px -12px rgba(32,63,67,.6);
}
.rz-a11y-btn:focus-visible { outline: 3px solid var(--rz-terracotta, #884B3D); outline-offset: 3px; }
@media (max-width: 600px) { .rz-a11y-btn { left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); } }

.rz-a11y-overlay { position: fixed; inset: 0; z-index: 200; display: none; }
.rz-a11y-overlay.is-open { display: block; }
.rz-a11y-backdrop { position: absolute; inset: 0; background: rgba(23,30,31,.5); }
.rz-a11y-panel {
	position: relative; width: min(380px, 90vw); height: 100%; background: #F8F4EE;
	padding: 28px; overflow-y: auto; box-shadow: 0 0 60px rgba(0,0,0,.3);
}
.rz-a11y-panel h2 { font-size: 22px; margin-bottom: 20px; }
.rz-a11y-close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #D8D0C6; background: #fff; cursor: pointer; font-size: 18px; }
.rz-a11y-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: #fff; border: 1px solid #E4DED2; border-radius: 12px; margin-bottom: 10px; }
.rz-a11y-fontrow { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 20px; }
.rz-a11y-fontrow button, .rz-a11y-reset { padding: 10px; border-radius: 8px; border: 1px solid #D8D0C6; background: #fff; cursor: pointer; font-size: 14px; }
.rz-a11y-fontrow button[aria-pressed="true"] { background: #203F43; color: #fff; border-color: #203F43; }
.rz-a11y-toggle { width: 44px; height: 24px; border-radius: 999px; border: none; background: #D8D0C6; position: relative; cursor: pointer; }
.rz-a11y-toggle[aria-checked="true"] { background: #203F43; }
.rz-a11y-toggle span { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: left .2s ease; }
.rz-a11y-toggle[aria-checked="true"] span { left: 22px; }
.rz-a11y-reset { width: 100%; margin-top: 8px; }

/* Applied preference states */
html[data-rz-contrast="true"] { filter: contrast(1.18) saturate(1.1); }
html[data-rz-links="true"] .rauszeit-page a { background: #FFF3B0; padding: 0 4px; text-decoration: underline; }
html[data-rz-reduce-motion="true"] .rauszeit-page * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
html[data-rz-calm="true"] .rauszeit-page { max-width: 780px; margin: 0 auto; letter-spacing: .01em; }
html[data-rz-calm="true"] .rauszeit-page img { filter: saturate(.85); }

@media (prefers-reduced-motion: reduce) {
	.rauszeit-page * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* Wave dividers on the dark blue sections – pure CSS pseudo-elements, so there is
   no extra markup nested inside the block editor's own layout wrappers to fight
   with. A gentle vertical "breathing" motion, not a sideways slide. */
@keyframes rz-wave-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes rz-wave-bob-bottom { 0%, 100% { transform: scaleY(-1) translateY(0); } 50% { transform: scaleY(-1) translateY(-7px); } }

.rz-wave-top-bottom,
.rz-wave-top {
	position: relative;
	overflow: hidden;
}
.rz-wave-top-bottom::before,
.rz-wave-top::before {
	content: '';
	position: absolute; top: -1px; left: 0; right: 0; height: 48px;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%2060'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2030%20Q150%200%20300%2030%20T600%2030%20T900%2030%20T1200%2030%20V0%20H0%20Z'%20fill='%23F8F4EE'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
	animation: rz-wave-bob 7s ease-in-out infinite;
	z-index: 1;
}
.rz-wave-top-bottom::after {
	content: '';
	position: absolute; bottom: -1px; left: 0; right: 0; height: 48px;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%2060'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2030%20Q150%200%20300%2030%20T600%2030%20T900%2030%20T1200%2030%20V0%20H0%20Z'%20fill='%23F8F4EE'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
	transform: scaleY(-1);
	animation: rz-wave-bob-bottom 7s ease-in-out infinite;
	z-index: 1;
}
html[data-rz-reduce-motion="true"] .rz-wave-top-bottom::before,
html[data-rz-reduce-motion="true"] .rz-wave-top-bottom::after,
html[data-rz-reduce-motion="true"] .rz-wave-top::before { animation: none; }
@media (prefers-reduced-motion: reduce) {
	.rz-wave-top-bottom::before,
	.rz-wave-top-bottom::after,
	.rz-wave-top::before { animation: none; }
}

/* Two colour-contrasted decorative waves at the very bottom of the final section
   (both layers stay the same dark-blue background either side, so this is pure
   texture, not a colour transition). */
.rz-wave-final { position: relative; overflow: hidden; }
.rz-wave-final::after {
	content: '';
	position: absolute; left: 0; right: 0; bottom: -1px; height: 70px;
	background-image:
		url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%2070'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2020%20Q150%200%20300%2020%20T600%2020%20T900%2020%20T1200%2020%20V70%20H0%20Z'%20fill='%23E4D5C3'%20fill-opacity='0.35'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%2070'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2035%20Q150%2055%20300%2035%20T600%2035%20T900%2035%20T1200%2035%20V70%20H0%20Z'%20fill='%23F8F4EE'%20fill-opacity='0.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat, no-repeat;
	background-size: 100% 100%, 100% 100%;
	pointer-events: none;
	animation: rz-wave-bob 8s ease-in-out infinite;
	z-index: 1;
}
html[data-rz-reduce-motion="true"] .rz-wave-final::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
	.rz-wave-final::after { animation: none; }
}


/* Responsive Korrekturen: Hero-Bild und Footer */
.rauszeit-page { overflow-x: clip; }

@media (max-width: 1024px) {
	.rauszeit-page #top {
		        display: flex !important;
		        flex-direction: column !important;
		        min-height: 0 !important;
		        overflow: visible !important;
	}
	
	.rauszeit-page #top > .wp-block-group {
		        order: 1;
		        width: 100% !important;
	}
	
	.rauszeit-page #top figure.wp-block-image {
		        order: 2;
		        position: relative !important;
		        inset: auto !important;
		        width: 100% !important;
		        height: auto !important;
		        min-height: 0 !important;
		        margin: 0 !important;
	}
	
	.rauszeit-page #top figure.wp-block-image img {
		        display: block;
		        width: 100% !important;
		        height: auto !important;
		        max-height: none !important;
		        object-fit: contain !important;
		        object-position: center !important;
	}
	
	.rauszeit-page footer > div[style*="grid-template-columns"] {
		        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
		        gap: 32px !important;
		        width: 100% !important;
	}
}

@media (max-width: 680px) {
	.rauszeit-page #top > .wp-block-group {
		        padding-left: 24px !important;
		        padding-right: 24px !important;
	}
	
	.rauszeit-page footer {
		        padding: 40px 24px 28px !important;
		        overflow: hidden;
	}
	
	.rauszeit-page footer > div[style*="grid-template-columns"] {
		        grid-template-columns: minmax(0, 1fr) !important;
		        gap: 28px !important;
	}
	
	.rauszeit-page footer > div[style*="grid-template-columns"] > div {
		        min-width: 0;
		        width: 100%;
		        overflow-wrap: anywhere;
	}
}



/* Finale Responsive- und Kontrastkorrekturen */
body.rauszeit-page footer,
body.rauszeit-page footer p,
body.rauszeit-page footer span,
body.rauszeit-page footer li,
body.rauszeit-page footer a {
	    color: #F8F4EE !important;
	    opacity: 1 !important;
}

body.rauszeit-page footer a:focus-visible {
	    outline: 3px solid #F8F4EE;
	    outline-offset: 4px;
}

@media (max-width: 1200px) {
	body.rauszeit-page #top {
		        display: flex !important;
		        flex-direction: column !important;
		        min-height: 0 !important;
		        overflow: visible !important;
	}
	
	body.rauszeit-page #top > .wp-block-group {
		        order: 1;
		        width: 100% !important;
	}
	
	body.rauszeit-page #top > figure.wp-block-image {
		        order: 2;
		        position: relative !important;
		        inset: auto !important;
		        width: 100% !important;
		        height: auto !important;
		        min-height: 0 !important;
		        margin: 0 !important;
	}
	
	body.rauszeit-page #top > figure.wp-block-image img {
		        display: block;
		        width: 100% !important;
		        height: auto !important;
		        max-height: none !important;
		        object-fit: contain !important;
		        object-position: center !important;
	}
	
	body.rauszeit-page header > div > div:last-child {
		        width: 100%;
		        justify-content: center !important;
	}
}

@media (max-width: 680px) {
	body.rauszeit-page header > div {
		        padding: 12px 16px !important;
		        gap: 14px !important;
	}
	
	body.rauszeit-page header > div > div:first-child {
		        width: 100%;
		        min-width: 0;
		        justify-content: space-between;
		        gap: 8px !important;
	}
	
	body.rauszeit-page header > div > div:first-child > a {
		        min-width: 0;
		        flex: 1 1 auto;
		        gap: 8px !important;
	}
	
	body.rauszeit-page header > div > div:first-child > a > img {
		        width: 104px !important;
		        height: 44px !important;
		        object-fit: contain;
	}
	
	body.rauszeit-page header > div > div:first-child > a > span {
		        min-width: 0;
		        padding-left: 8px !important;
		        gap: 2px !important;
	}
	
	body.rauszeit-page header > div > div:first-child > a > span > span:first-child {
		        font-size: 15px !important;
		        letter-spacing: .14em !important;
	}
	
	body.rauszeit-page header > div > div:first-child > a > span > span:last-child {
		        font-size: 8px !important;
		        letter-spacing: .11em !important;
		        white-space: nowrap;
	}
	
	body.rauszeit-page header > div > div:first-child > div {
		        flex: 0 0 auto;
		        padding-left: 8px !important;
		        gap: 6px !important;
	}
	
	body.rauszeit-page header > div > div:first-child > div svg {
		        width: 21px !important;
		        height: 21px !important;
	}
	
	body.rauszeit-page header > div > div:last-child {
		        flex-direction: column;
		        align-items: center !important;
		        gap: 12px !important;
	}
	
	body.rauszeit-page header nav {
		        width: 100%;
		        justify-content: center !important;
		        gap: 0 2px !important;
	}
	
	body.rauszeit-page header nav a {
		        padding: 7px 8px !important;
		        font-size: 14px !important;
		        text-align: center;
	}
	
	body.rauszeit-page header a.rz-btn {
		        display: flex !important;
		        width: min(100%, 340px) !important;
		        margin-inline: auto !important;
		        justify-content: center;
		        text-align: center;
	}
}