/* daysence Brand Layer — Single Source of Truth: Notion "Brand Style & Guidelines" §7
   Werte 1:1 übernommen, nicht neu definiert. Änderungen immer zuerst in Notion. */

/* FONTS · lokal gehostet (DSGVO) — Dateien: wp-content/uploads/fonts/ */
@font-face {
	font-family: 'DM Serif Display';
	src: url('../../../uploads/fonts/DMSerifDisplay-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'DM Serif Display';
	src: url('../../../uploads/fonts/DMSerifDisplay-Italic.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Outfit';
	src: url('../../../uploads/fonts/Outfit-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Outfit';
	src: url('../../../uploads/fonts/Outfit-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Outfit';
	src: url('../../../uploads/fonts/Outfit-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* Token-Version: 2026-09-04 */
:root {

	/* FARBEN · BRAND */
	--color-white:         #FAF7F2;
	--color-primary:       #EDE8E0;
	--color-secondary-1:   #C8BEB2;
	--color-secondary-2:   #7A6E64;
	--color-text:          #2E2A26;
	--color-accent:        #3D3530;

	/* FARBEN · ZUSTAND */
	--color-error:         #96502F;
	--color-success:       #4F5E43;

	/* FOKUSRING (:focus-visible) – Option A, entschieden 12.08.2026 */
	--focus-ring-brand:    #3D3530;
	--focus-ring-nr:       #EDE8E0;

	/* FARBEN · NIGHT REST */
	--color-nr-anker:      #2E1E2E;
	--color-nr-tief:       #3C2840;
	--color-nr-karten:     #4A3248;
	--color-nr-text:       #FAF7F2;
	--color-nr-text-mid:   #EDE8E0;
	--color-nr-text-muted: #C8BEB2;
	--color-accent-inverse:#EDE8E0;

	/* FARBEN · AKZENT WARM (Header-CTA, Entscheidung 27.09.2026 — s. DECISIONS_LOG) */
	--color-accent-warm:      #E8B44A;
	--color-accent-warm-ink:  #7A5200;

	/* TYPOGRAFIE · SCHRIFTEN */
	--font-serif:          'DM Serif Display', serif;
	--font-sans:           'Outfit', sans-serif;

	/* TYPOGRAFIE · SCALE */
	--text-display-a:      clamp(2.75rem, 2rem + 3vw, 4rem);
	--text-display-b:      clamp(3rem, 2.25rem + 3vw, 4.5rem);
	--text-h1:             clamp(2.25rem, 1.75rem + 2vw, 3rem);
	--text-h2:             clamp(1.625rem, 1.375rem + 1vw, 2rem);
	--text-h3:             1.375rem;
	--text-h4:             1.125rem;
	--text-body:           1rem;
	--text-body-sm:        0.9375rem;
	--text-caption:        0.8125rem;

	/* TYPOGRAFIE · GEWICHTE */
	--font-weight-light:   300;
	--font-weight-regular: 400;
	--font-weight-medium:  500;

	/* TYPOGRAFIE · LINE HEIGHTS */
	--leading-display:     1.05;
	--leading-heading:     1.2;
	--leading-body:        1.6;
	--leading-caption:     1.5;

	/* TYPOGRAFIE · LETTER SPACING */
	--tracking-tight:      -0.01em;
	--tracking-normal:     0em;
	--tracking-wide:       0.02em;
	--tracking-wider:      0.05em;
	--tracking-widest:     0.08em;

	/* SPACING · 4px Basis-Raster */
	--space-1:             4px;
	--space-2:             8px;
	--space-3:             12px;
	--space-4:             16px;
	--space-6:             24px;
	--space-8:             32px;
	--space-12:            48px;
	--space-16:            64px;
	--space-24:            96px;

	/* KOMPONENTEN · BUTTON */
	--button-padding-y:    12px;
	--button-padding-x:    24px;
	--button-radius:       4px;
	--button-font-size:    14px;
	--button-font-weight:  500;
	--button-tracking:     0.02em;
	--button-border-width: 1.5px;

	/* KOMPONENTEN · CARD */
	--card-padding:        16px;
	--card-radius:         6px;
	--card-border-width:   0.5px;
	--card-border-color:   #C8BEB2;
	--card-shadow:         none;

	/* KOMPONENTEN · TAG */
	--tag-padding-y:       4px;
	--tag-padding-x:       12px;
	--tag-radius:          20px;
	--tag-font-size:       11px;
	--tag-font-weight:     500;
	--tag-tracking:        0.03em;

	/* LAYOUT */
	--max-width:           1200px;
	--content-width:       760px;

	/* BREAKPOINTS */
	--breakpoint-mobile:   768px;
	--breakpoint-tablet:   1024px;

	/* MOTION (Header/Footer Hover-Feinschliff, aus Design-Vorlage übernommen 27.09.2026) */
	--ease-quiet:          cubic-bezier(0.4, 0, 0.2, 1);
	--duration-fast:       150ms;
	--duration-slow:       400ms;

}

/* ============================================
   FOKUS · :focus-visible (Barrierefreiheit/BFSG — §0 Finding 5, entschieden 12.08.2026)
   Sichtbarer Tastatur-Fokus für alle interaktiven Elemente, site-weit.
   Night-Rest-Kontext (--focus-ring-nr) greift über .theme-night-rest, sobald
   Night-Rest-Wrapper-Markup existiert (analog zu den bislang ungenutzten --color-nr-* Tokens).
   ============================================ */

:focus-visible {
	outline: 2px solid var(--focus-ring-brand);
	outline-offset: 2px;
}

.theme-night-rest :focus-visible {
	outline-color: var(--focus-ring-nr);
}

/* ============================================
   HEADER-LAUFSCHRIFT — dauerhaftes Ankündigungsband über dem Header
   (aus Louisas Design-Vorlage übernommen, Entscheidung 27.09.2026 — s. DECISIONS_LOG).
   Text kommt aus $daysence_marquee_text in blank.php, hier nur Optik/Animation.
   Reines CSS, kein JS — @keyframes läuft endlos, Pause bei prefers-reduced-motion.
   ============================================ */

.site-marquee {
	position: relative;
	z-index: 55;
	background: var(--color-accent);
	color: var(--color-primary);
	overflow: hidden;
	padding: 9px 0;
	font-family: var(--font-sans);
}

.site-marquee__track {
	display: flex;
	width: max-content;
	animation: site-marquee-scroll 42s linear infinite;
}

.site-marquee__group {
	display: flex;
	align-items: center;
	gap: 56px;
	padding-right: 56px;
	font-size: 13px;
	letter-spacing: var(--tracking-wide);
	white-space: nowrap;
}

@keyframes site-marquee-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* Pause-Schalter (WCAG 2.2.2): liegt rechts über dem Band, eigener Hintergrund verdeckt den Text darunter */
.site-marquee.is-paused .site-marquee__track { animation-play-state: paused; }

.site-marquee__toggle {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	padding: 0 12px;
	border: 0;
	background: var(--color-accent);
	color: var(--color-primary);
	cursor: pointer;
	box-shadow: -12px 0 12px -4px var(--color-accent);
}
.site-marquee__icon--play,
.site-marquee.is-paused .site-marquee__icon--pause { display: none; }
.site-marquee.is-paused .site-marquee__icon--play { display: block; }
.site-marquee__toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -4px; }

@media (prefers-reduced-motion: reduce) {
	.site-marquee__track { animation: none; }
	.site-marquee__toggle { display: none; }
}

/* ============================================
   SITE HEADER — Komponente (Brand Style & Guidelines §8.1)
   Nutzt ausschließlich Tokens aus §7 CSS Custom Properties
   ============================================ */

.site-header {
	background: var(--color-white);
	border-bottom: var(--card-border-width) solid var(--color-secondary-1);
}

/* Startseite: Header leinenfarben, ohne Trennlinie (Design-Vorlage, 11.10.2026) */
body[data-home] .site-header { background: var(--color-primary); border-bottom: 0; }

.site-header__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: var(--space-4) var(--space-6);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	position: relative;
}

.site-header__logo {
	display: inline-flex;
	align-items: center;
	color: var(--color-accent);
}

/* Logo-Höhen fluid (18.10.2026): Footer immer etwas größer als Header, Claim im Footer folgt der Footer-Höhe */
:root {
	--logo-h-header: clamp(40px, 1vw + 34px, 64px);
	--logo-h-footer: clamp(48px, 2.4vw + 32px, 88px);
}

.site-header__logo-svg {
	height: var(--logo-h-header);
	width: auto;
	display: block;
}

.site-header__nav { display: flex; }

.site-header__menu {
	list-style: none;
	display: flex;
	gap: var(--space-8);
	margin: 0;
	padding: 0;
}

.nav-item__link {
	font-family: var(--font-sans);
	font-size: var(--text-body);
	font-weight: var(--font-weight-medium);
	color: var(--color-text);
	text-decoration: none;
	letter-spacing: var(--tracking-wide);
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	transition: border-color var(--duration-slow) var(--ease-quiet), color var(--duration-fast) var(--ease-quiet);
}

.nav-item__link:hover { color: var(--color-text); border-bottom-color: var(--color-accent-warm-ink); }
/* Aktiver Abschnitt (Scroll-Spy auf der Startseite, 20.10.2026) */
.nav-item__link.is-active { border-bottom-color: var(--color-text); }

/* Header-CTA — Amber-Pill (aus Design-Vorlage übernommen, Entscheidung 27.09.2026) */
.site-header__cta {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--tracking-wide);
	color: var(--color-text);
	background: var(--color-accent-warm);
	padding: 11px 20px;
	border-radius: var(--button-radius);
	border: 0;
	cursor: pointer;
	transition: opacity var(--duration-fast) var(--ease-quiet), transform var(--duration-fast) var(--ease-quiet);
}

.site-header__cta:hover { opacity: .8; color: var(--color-text); }
.site-header__cta:active { transform: scale(.98); }

/* Phase 2: .nav-item--has-dropdown erhält Dropdown-Container-Styles erst bei Aktivierung */

.site-header__cart {
	display: inline-flex;
	align-items: center;
	color: var(--color-accent);
}

.site-header__cart-icon { width: 20px; height: 20px; }

/* Mobile-Toggle via Checkbox-Hack — kein JS nötig (lean, Phase 1) */
.site-header__toggle-input { position: absolute; opacity: 0; pointer-events: none; }

.site-header__toggle {
	display: none;
	flex-direction: column;
	gap: var(--space-1);
	cursor: pointer;
}

.site-header__toggle span {
	width: 22px;
	height: 2px;
	background: var(--color-accent);
}

/* ============================================
   BREADCRUMBS — Yoast-Ausgabe (Aufgabe „SEO-Tech-Setup: Yoast/RankMath,
   XML-Sitemap, robots.txt, Schema-Markup"), Variante 2 (blank.php, kein FSE).
   Styling über brand.css-Tokens statt Yoast-Default-CSS.
   ============================================ */

.breadcrumbs {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: var(--space-4) var(--space-6) 0;
	font-family: var(--font-sans);
	font-size: var(--text-caption);
	font-weight: var(--font-weight-regular);
	color: var(--color-secondary-2);
	letter-spacing: var(--tracking-wide);
}

.breadcrumbs a {
	color: var(--color-secondary-2);
	text-decoration: none;
}

.breadcrumbs a:hover { color: var(--color-accent); }

.breadcrumbs .breadcrumb_last { color: var(--color-text); }

/* ============================================
   SITE FOOTER — Komponente (Brand Style & Guidelines §8.2)
   Nutzt ausschließlich Tokens aus §7 CSS Custom Properties.
   Dunkles 4-Spalten-Layout aus Louisas Design-Vorlage übernommen (Entscheidung
   27.09.2026 — s. DECISIONS_LOG), Struktur/Inhalte (Cart-freie Rechtslinks,
   Trust-Badges, Newsletter-Trigger) unverändert aus der bisherigen Version übernommen.
   Newsletter nicht als feste Box, sondern als Footer-Link + Pop-up (#663-Nachtrag,
   Entscheidung 13.09.2026) — Modal-Styles siehe Abschnitt "NEWSLETTER MODAL" unten.
   ============================================ */

.site-footer {
	background: var(--color-accent);
	color: var(--color-primary);
	border-radius: 14px 14px 0 0;
}

.site-footer__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: clamp(48px, 7vw, 80px) var(--space-6) var(--space-8);
}

.site-footer__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: clamp(28px, 4vw, 48px);
}

/* Letzte Spalte (Service) schließt rechts bündig mit der Trennlinie und „Datenschutz“ ab */
.site-footer__col:last-child { margin-left: auto; }

.site-footer__logo {
	display: inline-flex;
	align-items: center;
	color: var(--color-primary);
	margin-bottom: var(--space-4);
}

.site-footer__logo-svg {
	height: var(--logo-h-footer);
	width: auto;
	display: block;
}

.site-footer__claim {
	font-size: var(--text-body-sm);
	line-height: var(--leading-body);
	color: var(--color-secondary-1);
	margin: 0;
	max-width: 30ch;
}

/* Claim steht horizontal mittig im Footer, auf Höhe des Logos (mobil im normalen Fluss) */
@media (min-width: 769px) {
	.site-footer__grid { position: relative; }
	.site-footer__claim {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		min-height: var(--logo-h-footer);
		white-space: nowrap;
		max-width: none;
		text-align: center;
	}
}

.site-footer__col-title {
	font-size: var(--text-caption);
	letter-spacing: var(--tracking-widest);
	color: var(--color-secondary-1);
	margin-bottom: var(--space-4);
}

.site-footer__col-links {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	font-size: var(--text-body-sm);
}

.site-footer__col-links a,
.site-footer__col-links button {
	color: var(--color-primary);
	text-decoration: none;
	transition: opacity var(--duration-fast) var(--ease-quiet);
}

.site-footer__col-links a:hover,
.site-footer__col-links button:hover { opacity: .6; color: var(--color-primary); }

/* Newsletter-Trigger ist ein <button>, kein <a> (kein Navigationsziel) —
   Reset auf Link-Optik, damit er sich nahtlos in .site-footer__col-links einreiht. */
.site-footer__col-links button {
	background: none;
	border: 0;
	padding: 0;
	text-align: left;
	font-family: var(--font-sans);
	font-size: inherit;
	cursor: pointer;
}

.site-footer__trust {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-top: var(--space-4);
}

.site-footer__trust-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--text-caption);
	color: var(--color-secondary-1);
}

.site-footer__trust-icon { flex-shrink: 0; }

.site-footer__bottom {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-6);
	margin-top: clamp(40px, 6vw, 64px);
	padding-top: var(--space-6);
	border-top: var(--card-border-width) solid var(--color-secondary-2);
	font-size: var(--text-caption);
	color: var(--color-secondary-1);
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
}

.site-footer__legal-link {
	font-family: var(--font-sans);
	font-size: var(--text-caption);
	font-weight: var(--font-weight-regular);
	color: var(--color-secondary-1);
	text-decoration: none;
	letter-spacing: var(--tracking-wide);
	transition: opacity var(--duration-fast) var(--ease-quiet), color var(--duration-fast) var(--ease-quiet);
}

.site-footer__legal-link:hover { opacity: 1; color: var(--color-accent-warm); }

/* ============================================
   TABLET — sync mit --breakpoint-tablet (1024px) aus §7
   Custom Properties nicht in @media nutzbar (CSS-Spec-Limit) → Wert hier als Zahl,
   Quelle der Wahrheit bleibt --breakpoint-tablet. Bewusst schlank gehalten (kein
   zusätzlicher Layout-Umbruch) — nur Abstände verengt, bevor bei 768px auf das
   Mobile-Hamburger-Menü umgeschaltet wird. Analog fürs Footer-Modul (#663).
   ============================================ */
@media (max-width: 1024px) {
	.site-header__inner { padding: var(--space-4); gap: var(--space-4); }
	.site-header__menu { gap: var(--space-6); }

	.site-footer__inner { padding: var(--space-6) var(--space-4); }
}

/* ============================================
   MOBILE — sync mit --breakpoint-mobile (768px) aus §7
   Custom Properties nicht in @media nutzbar (CSS-Spec-Limit) → Wert hier als Zahl,
   Quelle der Wahrheit bleibt --breakpoint-mobile.
   ============================================ */
@media (max-width: 768px) {
	.site-header__toggle { display: flex; }

	/* Header mobil sticky (18.10.2026): Toggle bleibt erreichbar, Desktop bleibt statisch. Unter dem Newsletter-Modal (z-index 1000). */
	.site-header { position: sticky; top: 0; z-index: 200; }
	html { scroll-padding-top: calc(var(--logo-h-header) + 2 * var(--space-4) + 8px); }

	/* Mobil-Menü als Dropdown direkt unter dem Header (scrollt mit, Toggle bleibt erreichbar; 11.10.2026) */
	.site-header__nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 100;
		box-sizing: border-box;
		padding: var(--space-4) var(--space-6) var(--space-6);
		background: var(--color-white);
		border-bottom: var(--card-border-width) solid var(--color-secondary-1);
	}
	body[data-home] .site-header__nav { background: var(--color-primary); }

	.site-header__menu { flex-direction: column; gap: 0; width: 100%; }
	.site-header__menu .nav-item__link { display: flex; align-items: center; min-height: 44px; border-bottom: 0; }

	.site-header__toggle-input:checked ~ .site-header__nav { display: flex; }

	.site-footer__bottom { flex-direction: column; align-items: flex-start; }

	.newsletter-modal { padding: var(--space-4); }
}

/* ============================================
   NEWSLETTER MODAL — Footer-Popup (#663-Nachtrag, 13.09.2026)
   Markup wird von daysence-brand.php auf wp_footer ausgegeben, Öffnen/Schließen
   sowie das Nachladen des Brevo-Formulars übernimmt newsletter-modal.js.
   Die eigentliche Formular-Box bringt ihr Inline-Styling von Brevo selbst mit
   (Hintergrund/Radius/Border) — hier nur Overlay, Positionierung, Close-Button.
   ============================================ */

.newsletter-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	overflow-y: auto;
	padding: var(--space-8) var(--space-4);
	display: flex;
	align-items: center;
	align-items: safe center; /* verhindert abgeschnittenen Dialog-Kopf beim Scrollen, falls Inhalt > Viewport */
	justify-content: center;
}

.newsletter-modal[aria-hidden="true"] { display: none; }

.newsletter-modal__overlay {
	position: fixed;
	inset: 0;
	background: rgba(46, 42, 38, 0.6);
	background: color-mix(in srgb, var(--color-text) 60%, transparent);
}

.newsletter-modal__dialog {
	position: relative;
	width: min(94vw, 440px);
	margin: 0 auto;
	border-radius: var(--card-radius);
	overflow: hidden;
}

/* Brevo liefert unverändertes Desktop-WYSIWYG-Markup mit festen Inline-Größen
   (32px-Headline, 8px-Block-Padding, eigenes Container-Padding aus dem
   nachgeladenen sib-styles.css) — nicht responsiv gedacht. Da Inline-Styles
   sonst gewinnen, hier gezielt per Klasse + !important überschrieben (Klassen
   werden von uns selbst im Formular-Markup gesetzt, siehe daysence-brand.php). */
.newsletter-modal #sib-container {
	padding: var(--space-6) var(--space-4) !important;
}

/* Brevo-Embed setzt Roboto per Inline-Style/sib-styles.css; @font-face dafür wird nicht geladen (COOKIE-03).
   Markenschrift erzwingen, sonst Fallback auf System-Sans. */
.newsletter-modal #sib-container,
.newsletter-modal #sib-container * { font-family: var(--font-sans) !important; }
.newsletter-modal .nl-form__block { padding: 6px 0 !important; }

.newsletter-modal .nl-form__eyebrow p {
	font-size: var(--text-caption) !important;
	letter-spacing: var(--tracking-wide) !important;
}

.newsletter-modal .nl-form__headline p {
	font-size: 26px !important;
	line-height: var(--leading-heading) !important;
}

.newsletter-modal .nl-form__intro p {
	font-size: var(--text-caption) !important;
	line-height: var(--leading-body) !important;
}

@media (max-width: 480px) {
	.newsletter-modal .nl-form__headline p { font-size: 22px !important; }
}

.newsletter-modal__close {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	z-index: 1;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-white);
	border: 0;
	border-radius: 50%;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--color-secondary-2);
	cursor: pointer;
}

.newsletter-modal__close:hover { color: var(--color-accent); }

/* ============================================
   A11Y-KORREKTUREN (SK-21E, 11.10.2026)
   - Breadcrumb: Kontrast >= 4,5:1 (vorher --color-secondary-2 auf --color-primary = 4,05:1)
   - Touch-Targets >= 44 px (Header-CTA, Footer-Links, Rechtliches, Breadcrumb)
   Werte nur aus bestehenden Tokens (§7), keine neuen Farbwerte.
   ============================================ */
.breadcrumbs,
.breadcrumbs a { color: var(--color-accent); }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; column-gap: .35em; }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumbs .breadcrumb_last { font-weight: var(--font-weight-medium); }

.site-header__cta { min-height: 44px; }

.site-footer__col-links { gap: 0; }
.site-footer__col-links a,
.site-footer__col-links button { display: inline-flex; align-items: center; min-height: 44px; }

.site-footer__legal { gap: 0 var(--space-6); }
.site-footer__legal-link { display: inline-flex; align-items: center; min-height: 44px; }
.site-header__logo,
.site-footer__logo { display: inline-flex; align-items: center; min-height: 44px; }