/*
 * Endlich Nichtraucher - Frontend.
 *
 * Alles ist unter .conz-nr gekapselt und arbeitet mit eigenen Custom
 * Properties, damit kein Theme dazwischenfunkt. Die Farben lassen sich pro
 * Seite überschreiben, indem --conz-nr-* am Wrapper neu gesetzt wird.
 */

.conz-nr {
	--conz-nr-primary: #7cb342;
	--conz-nr-primary-soft: #8bc34a;
	--conz-nr-primary-dark: #558b2f;
	--conz-nr-ink: #0f172a;
	--conz-nr-ink-2: #475569;
	--conz-nr-ink-3: #64748b;
	--conz-nr-primary-text: #4b7a29;
	--conz-nr-surface: #ffffff;
	--conz-nr-surface-2: #f8fafc;
	--conz-nr-border: #e2e8f0;
	--conz-nr-danger: #ef4444;
	--conz-nr-emphasis: #1a1a1a;
	--conz-nr-emphasis-ink: #ffffff;
	--conz-nr-warn: #f59e0b;
	--conz-nr-radius: 16px;
	--conz-nr-radius-sm: 10px;
	--conz-nr-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .18);

	box-sizing: border-box;
	color: var(--conz-nr-ink);
	font-size: 16px;
	line-height: 1.5;
	max-width: 1000px;
	margin: 0 auto;

	/*
	 * Der Block bringt seine eigene Flaeche mit. Ohne sie sitzen die
	 * Abschnittsueberschriften, der Abzeichenzaehler und der Hinweistext
	 * direkt auf der Seite. Sobald das Schema nicht zur Seite passt, etwa ein
	 * dunkles Dashboard auf einer hellen Seite, waeren sie unlesbar.
	 */
	background: var(--conz-nr-surface-2);
	padding: 1.5rem;
	border-radius: var(--conz-nr-radius);
}

.conz-nr *,
.conz-nr *::before,
.conz-nr *::after {
	box-sizing: inherit;
}

.conz-nr [hidden] {
	display: none !important;
}

.conz-nr__title {
	margin: 0 0 1rem;
	font-size: 1.6rem;
	line-height: 1.2;
}

/*
 * Ueberschriften bekommen ihre Farbe ausdruecklich: Themes faerben h2/h3
 * hart ein (Themify je nach Zeile schwarz, tuerkis oder gold), und eine
 * gesetzte Farbe schlaegt die vom Wrapper geerbte immer.
 */
.conz-nr .conz-nr__title,
.conz-nr .conz-nr__setup-head h3,
.conz-nr .conz-nr__section-title,
.conz-nr .conz-nr__projection h3,
.conz-nr .conz-nr__goal-head h3,
.conz-nr .conz-nr__modal-box h3 {
	color: var(--conz-nr-ink);
}

/* --------------------------------------------------------------
 * Ladezustand
 * -------------------------------------------------------------- */

.conz-nr__loading {
	display: flex;
	justify-content: center;
	padding: 2.5rem 0;
}

.conz-nr__spinner {
	width: 28px;
	height: 28px;
	border: 3px solid var(--conz-nr-border);
	border-top-color: var(--conz-nr-primary);
	border-radius: 50%;
	animation: conz-nr-spin 900ms linear infinite;
}

@keyframes conz-nr-spin {
	to {
		transform: rotate(360deg);
	}
}

/* --------------------------------------------------------------
 * Icons und Grundelemente
 * -------------------------------------------------------------- */

.conz-nr-ico {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
}

.conz-nr-ico--sm {
	width: 16px;
	height: 16px;
}

.conz-nr-ico--lg {
	width: 34px;
	height: 34px;
}

.conz-nr .conz-nr__btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .7rem 1.15rem;
	border: 1px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-weight: 600;
	line-height: 1.1;
	cursor: pointer;
	text-decoration: none;
	transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.conz-nr .conz-nr__btn:hover {
	transform: translateY(-1px);
}

.conz-nr .conz-nr__btn:focus-visible {
	outline: 3px solid var(--conz-nr-primary-soft);
	outline-offset: 2px;
}

.conz-nr__btn .conz-nr-ico {
	width: 18px;
	height: 18px;
}

.conz-nr .conz-nr__btn--primary {
	background: linear-gradient(135deg, var(--conz-nr-primary-soft), var(--conz-nr-primary-dark));
	color: #fff;
	box-shadow: 0 8px 20px -10px rgba(124, 179, 66, .9);
}

.conz-nr .conz-nr__btn--ghost {
	background: var(--conz-nr-surface);
	border-color: var(--conz-nr-border);
	color: var(--conz-nr-ink-2);
}

.conz-nr .conz-nr__btn--quiet {
	background: transparent;
	color: var(--conz-nr-ink-3);
	padding-inline: .6rem;
}

.conz-nr .conz-nr__btn--quiet:hover {
	color: var(--conz-nr-ink-2);
}

.conz-nr .conz-nr__btn--danger {
	background: var(--conz-nr-emphasis);
	color: var(--conz-nr-emphasis-ink);
}

.conz-nr__bar {
	height: 10px;
	border-radius: 999px;
	background: var(--conz-nr-border);
	overflow: hidden;
}

.conz-nr__bar--thin {
	height: 4px;
	margin-top: .6rem;
}

.conz-nr__bar-fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--conz-nr-primary-soft), var(--conz-nr-primary-dark));
	transition: width 600ms ease;
}

.conz-nr__section-title {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin: 0 0 1rem;
	font-size: 1.1rem;
}

.conz-nr__section-title .conz-nr-ico {
	color: var(--conz-nr-primary);
}

/* --------------------------------------------------------------
 * Einrichtung
 * -------------------------------------------------------------- */

.conz-nr__setup {
	background: var(--conz-nr-surface);
	border: 1px solid var(--conz-nr-border);
	border-radius: var(--conz-nr-radius);
	padding: 1.75rem;
	box-shadow: var(--conz-nr-shadow);
}

.conz-nr__setup-head {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin-bottom: 1.5rem;
}

.conz-nr__setup-head .conz-nr-ico {
	color: var(--conz-nr-primary);
}

.conz-nr__setup-head h3 {
	margin: 0 0 .25rem;
	font-size: 1.25rem;
}

.conz-nr__setup-head p {
	margin: 0;
	color: var(--conz-nr-ink-2);
	font-size: .95rem;
}

.conz-nr__fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1rem;
}

.conz-nr__field {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	font-size: .9rem;
	font-weight: 600;
	color: var(--conz-nr-ink-2);
}

.conz-nr__field--wide {
	grid-column: 1 / -1;
}

.conz-nr .conz-nr__field input {
	width: 100%;
	padding: .65rem .8rem;
	border: 1px solid var(--conz-nr-border);
	border-radius: var(--conz-nr-radius-sm);
	background: var(--conz-nr-surface-2);
	font: inherit;
	font-weight: 500;
	color: var(--conz-nr-ink);
}

.conz-nr .conz-nr__field input:focus {
	outline: none;
	border-color: var(--conz-nr-primary);
	box-shadow: 0 0 0 3px rgba(124, 179, 66, .18);
}

.conz-nr__setup-actions {
	display: flex;
	gap: .75rem;
	flex-wrap: wrap;
	margin-top: 1.5rem;
}

.conz-nr__hint {
	margin: 1rem 0 0;
	font-size: .85rem;
	color: var(--conz-nr-ink-3);
}

/* --------------------------------------------------------------
 * Kopfbereich
 * -------------------------------------------------------------- */

.conz-nr__hero {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	padding: 1.75rem;
	border-radius: var(--conz-nr-radius);
	background: linear-gradient(135deg, #f1f8e9 0%, #f8fafc 60%);
	border: 1px solid var(--conz-nr-border);
}

.conz-nr__ring {
	position: relative;
	width: 132px;
	height: 132px;
	flex: 0 0 auto;
}

.conz-nr__ring svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.conz-nr__ring-track {
	fill: none;
	stroke: rgba(15, 23, 42, .08);
	stroke-width: 9;
}

.conz-nr__ring-value {
	fill: none;
	stroke: var(--conz-nr-primary);
	stroke-width: 9;
	stroke-linecap: round;
	transition: stroke-dashoffset 700ms ease;
}

.conz-nr__ring-label {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1.1;
}

.conz-nr__ring-label strong {
	font-size: 2.2rem;
	font-weight: 700;
	letter-spacing: -.02em;
}

.conz-nr__ring-label small {
	font-size: .8rem;
	color: var(--conz-nr-ink-2);
}

.conz-nr__hero-text {
	flex: 1 1 220px;
	min-width: 0;
}

.conz-nr__eyebrow {
	margin: 0;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--conz-nr-ink-3);
}

.conz-nr__clock {
	margin: .2rem 0;
	font-size: clamp(1.5rem, 4vw, 2.1rem);
	font-weight: 700;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

.conz-nr__since {
	margin: 0;
	font-size: .9rem;
	color: var(--conz-nr-ink-2);
}

.conz-nr__score {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .1rem;
	padding: .9rem 1.2rem;
	border-radius: var(--conz-nr-radius-sm);
	background: var(--conz-nr-surface);
	border: 1px solid var(--conz-nr-border);
}

.conz-nr__score .conz-nr-ico {
	color: var(--conz-nr-warn);
}

.conz-nr__score strong {
	font-size: 1.5rem;
	font-variant-numeric: tabular-nums;
}

.conz-nr__score small {
	font-size: .75rem;
	color: var(--conz-nr-ink-3);
	text-transform: uppercase;
	letter-spacing: .06em;
}

/* --------------------------------------------------------------
 * Kennzahlen
 * -------------------------------------------------------------- */

.conz-nr__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1rem;
	margin-top: 1.25rem;
}

.conz-nr__stat {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	padding: 1.15rem;
	border-radius: var(--conz-nr-radius-sm);
	background: var(--conz-nr-surface);
	border: 1px solid var(--conz-nr-border);
	box-shadow: var(--conz-nr-shadow);
}

.conz-nr__stat-icon {
	color: var(--conz-nr-primary);
}

.conz-nr__stat-value {
	font-size: 1.45rem;
	font-weight: 700;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

.conz-nr__stat-label {
	font-size: .85rem;
	color: var(--conz-nr-ink-2);
}

.conz-nr__projection {
	margin-top: 1.25rem;
	padding: 1.25rem 1.5rem;
	border-radius: var(--conz-nr-radius-sm);
	background: var(--conz-nr-surface-2);
	border: 1px solid var(--conz-nr-border);
}

.conz-nr__projection h3 {
	margin: 0 0 .75rem;
	font-size: 1rem;
}

.conz-nr__projection ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.conz-nr__projection li {
	display: flex;
	flex-direction: column;
}

.conz-nr__projection span {
	font-size: .8rem;
	color: var(--conz-nr-ink-3);
}

.conz-nr__projection strong {
	font-size: 1.15rem;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------
 * Sparziel
 * -------------------------------------------------------------- */

.conz-nr__goal {
	margin-top: 1.25rem;
	padding: 1.25rem 1.5rem;
	border-radius: var(--conz-nr-radius-sm);
	background: var(--conz-nr-surface);
	border: 1px solid var(--conz-nr-border);
}

.conz-nr__goal-head {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-bottom: .75rem;
}

.conz-nr__goal-head .conz-nr-ico {
	color: var(--conz-nr-primary);
}

.conz-nr__goal-head h3 {
	margin: 0;
	font-size: 1.05rem;
	flex: 1 1 auto;
}

.conz-nr__goal-pct {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.conz-nr__goal-note {
	margin: .6rem 0 0;
	font-size: .9rem;
	color: var(--conz-nr-ink-2);
}

/* --------------------------------------------------------------
 * Zeitleiste
 * -------------------------------------------------------------- */

.conz-nr__timeline {
	margin-top: 2rem;
}

.conz-nr__ms-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

.conz-nr__ms {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border-radius: var(--conz-nr-radius-sm);
	background: var(--conz-nr-surface);
	border: 1px solid var(--conz-nr-border);
	transition: border-color 200ms ease, box-shadow 200ms ease;
}

/*
 * Offene Stationen werden ueber die Textfarbe zurueckgenommen, nicht ueber
 * opacity: durchscheinende Karten nehmen die Seitenfarbe an und werden auf
 * hellem Grund unleserlich.
 */
.conz-nr__ms:not(.is-done) .conz-nr__ms-head strong {
	color: var(--conz-nr-ink-2);
}

.conz-nr__ms:not(.is-done) .conz-nr__ms-body p {
	color: var(--conz-nr-ink-3);
}

.conz-nr__ms.is-done {
	border-color: rgba(124, 179, 66, .45);
}

.conz-nr__ms.is-next {
	border-color: var(--conz-nr-primary);
	box-shadow: 0 0 0 3px rgba(124, 179, 66, .12);
}

.conz-nr__ms-icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	border-radius: 12px;
	background: var(--conz-nr-surface-2);
	color: var(--conz-nr-ink-3);
}

.conz-nr__ms.is-done .conz-nr__ms-icon {
	background: linear-gradient(135deg, var(--conz-nr-primary-soft), var(--conz-nr-primary-dark));
	color: #fff;
}

.conz-nr__ms.is-next .conz-nr__ms-icon {
	background: rgba(124, 179, 66, .16);
	color: var(--conz-nr-primary-dark);
}

.conz-nr__ms-body {
	flex: 1 1 auto;
	min-width: 0;
}

.conz-nr__ms-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.conz-nr__ms-head strong {
	font-size: 1rem;
}

.conz-nr__ms-when {
	font-size: .8rem;
	color: var(--conz-nr-ink-3);
	white-space: nowrap;
}

.conz-nr__ms-body p {
	margin: .25rem 0 0;
	font-size: .9rem;
	color: var(--conz-nr-ink-2);
}

.conz-nr__ms.is-done .conz-nr__bar--thin {
	display: none;
}

.conz-nr__ms-state {
	color: var(--conz-nr-primary);
	opacity: 0;
	transition: opacity 200ms ease;
}

.conz-nr__ms.is-done .conz-nr__ms-state {
	opacity: 1;
}

/* --------------------------------------------------------------
 * Abzeichen
 * -------------------------------------------------------------- */

.conz-nr__badges {
	margin-top: 2rem;
}

.conz-nr__badge-count {
	margin-left: auto;
	font-size: .85rem;
	font-weight: 500;
	color: var(--conz-nr-ink-3);
}

.conz-nr__badge-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: .75rem;
}

.conz-nr__badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: .35rem;
	padding: 1.1rem .85rem;
	border-radius: var(--conz-nr-radius-sm);
	background: var(--conz-nr-surface);
	border: 1px solid var(--conz-nr-border);
}

.conz-nr__badge strong {
	font-size: .92rem;
}

.conz-nr__badge small {
	font-size: .78rem;
	line-height: 1.35;
	color: var(--conz-nr-ink-3);
}

.conz-nr__badge-icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--conz-nr-surface-2);
	color: var(--conz-nr-ink-3);
}

.conz-nr__badge-icon .conz-nr-ico {
	width: 26px;
	height: 26px;
}

.conz-nr__badge-lock {
	position: absolute;
	right: -2px;
	bottom: -2px;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--conz-nr-surface);
	border: 1px solid var(--conz-nr-border);
	color: var(--conz-nr-ink-3);
}

.conz-nr__badge-lock .conz-nr-ico {
	width: 11px;
	height: 11px;
}

.conz-nr__badge.is-locked strong {
	color: var(--conz-nr-ink-2);
}

.conz-nr__badge.is-locked small {
	color: var(--conz-nr-ink-3);
}

.conz-nr__badge.is-unlocked {
	border-color: rgba(124, 179, 66, .4);
}

.conz-nr__badge.is-unlocked .conz-nr__badge-icon {
	background: linear-gradient(135deg, var(--conz-nr-primary-soft), var(--conz-nr-primary-dark));
	color: #fff;
}

.conz-nr__badge.is-unlocked .conz-nr__badge-lock {
	display: none;
}

.conz-nr__badge.is-fresh {
	animation: conz-nr-pop 700ms ease;
}

@keyframes conz-nr-pop {
	0% {
		transform: scale(1);
	}
	40% {
		transform: scale(1.06);
	}
	100% {
		transform: scale(1);
	}
}

/* --------------------------------------------------------------
 * Verlangen und Tagebuch
 * -------------------------------------------------------------- */

.conz-nr__tools {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	align-items: start;
	gap: 1rem;
	margin-top: 2rem;
}

.conz-nr__tool {
	padding: 1.35rem 1.5rem;
	border-radius: var(--conz-nr-radius-sm);
	background: var(--conz-nr-surface);
	border: 1px solid var(--conz-nr-border);
}

.conz-nr__tool p {
	margin: 0 0 1rem;
	font-size: .9rem;
	color: var(--conz-nr-ink-2);
}

.conz-nr__tool--craving {
	background: linear-gradient(135deg, #fff 0%, #fef2f2 100%);
}

.conz-nr__tool-meta {
	margin: .9rem 0 0 !important;
	font-size: .85rem !important;
	color: var(--conz-nr-ink-3) !important;
}

.conz-nr__tool-meta strong {
	color: var(--conz-nr-ink);
}

.conz-nr .conz-nr__journal-form textarea {
	width: 100%;
	padding: .7rem .85rem;
	border: 1px solid var(--conz-nr-border);
	border-radius: var(--conz-nr-radius-sm);
	background: var(--conz-nr-surface-2);
	font: inherit;
	resize: vertical;
	color: var(--conz-nr-ink);
}

.conz-nr .conz-nr__journal-form textarea:focus {
	outline: none;
	border-color: var(--conz-nr-primary);
	box-shadow: 0 0 0 3px rgba(124, 179, 66, .18);
}

.conz-nr__mood {
	display: flex;
	gap: .4rem;
	flex-wrap: wrap;
	margin: .75rem 0;
}

.conz-nr__mood-option input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.conz-nr__mood-option span {
	display: inline-block;
	padding: .35rem .75rem;
	border-radius: 999px;
	border: 1px solid var(--conz-nr-border);
	font-size: .82rem;
	cursor: pointer;
	color: var(--conz-nr-ink-2);
}

.conz-nr__mood-option input:checked + span {
	background: var(--conz-nr-primary-soft);
	border-color: var(--conz-nr-primary-dark);
	color: #0f172a;
}

.conz-nr__mood-option input:focus-visible + span {
	outline: 3px solid var(--conz-nr-primary-soft);
	outline-offset: 2px;
}

.conz-nr__journal-list {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	max-height: 320px;
	overflow-y: auto;
}

.conz-nr__journal-item {
	padding: .8rem .95rem;
	border-radius: var(--conz-nr-radius-sm);
	background: var(--conz-nr-surface-2);
	border-left: 3px solid var(--conz-nr-border);
}

.conz-nr__journal-item.is-great {
	border-left-color: var(--conz-nr-primary);
}

.conz-nr__journal-item.is-tough {
	border-left-color: var(--conz-nr-warn);
}

.conz-nr__journal-meta {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-size: .78rem;
	color: var(--conz-nr-ink-3);
}

.conz-nr__journal-mood {
	padding: .1rem .5rem;
	border-radius: 999px;
	background: var(--conz-nr-surface);
	border: 1px solid var(--conz-nr-border);
}

.conz-nr .conz-nr__journal-remove {
	margin-left: auto;
	border: 0;
	background: none;
	font-size: 1.1rem;
	line-height: 1;
	color: var(--conz-nr-ink-2);
	cursor: pointer;
}

.conz-nr .conz-nr__journal-remove:hover {
	color: var(--conz-nr-danger);
}

.conz-nr__journal-item p {
	margin: .35rem 0 0 !important;
	font-size: .9rem;
	color: var(--conz-nr-ink) !important;
	white-space: pre-wrap;
}

.conz-nr__journal-empty {
	font-size: .88rem;
	color: var(--conz-nr-ink-3);
}

/* --------------------------------------------------------------
 * Fußzeile
 * -------------------------------------------------------------- */

.conz-nr__actions {
	display: flex;
	align-items: center;
	gap: .75rem;
	flex-wrap: wrap;
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--conz-nr-border);
}

.conz-nr__sync {
	margin-left: auto;
	font-size: .8rem;
	color: var(--conz-nr-ink-3);
}

.conz-nr__disclaimer {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	margin: 1.5rem 0 0;
	font-size: .8rem;
	line-height: 1.5;
	color: var(--conz-nr-ink-3);
}

.conz-nr__disclaimer .conz-nr-ico {
	margin-top: .15rem;
	flex: 0 0 auto;
}

.conz-nr__noscript {
	padding: 1rem;
	border-radius: var(--conz-nr-radius-sm);
	background: var(--conz-nr-surface-2);
	border: 1px solid var(--conz-nr-border);
	font-size: .9rem;
}

/* --------------------------------------------------------------
 * Verlangens-Dialog
 * -------------------------------------------------------------- */

body.conz-nr-modal-open {
	overflow: hidden;
}

.conz-nr__modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
	padding: 1.25rem;
	background: rgba(15, 23, 42, .72);
	backdrop-filter: blur(3px);
	animation: conz-nr-fade 200ms ease;
}

@keyframes conz-nr-fade {
	from {
		opacity: 0;
	}
}

.conz-nr__modal-box {
	position: relative;
	width: min(460px, 100%);
	max-height: 90vh;
	overflow-y: auto;
	padding: 2rem 1.75rem 1.75rem;
	border-radius: var(--conz-nr-radius);
	background: var(--conz-nr-surface);
	text-align: center;
	box-shadow: 0 30px 60px -20px rgba(15, 23, 42, .5);
}

.conz-nr__modal-box h3 {
	margin: 0 0 1.25rem;
	font-size: 1.35rem;
}

.conz-nr__modal-close {
	position: absolute;
	top: .75rem;
	right: .75rem;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: var(--conz-nr-surface-2);
	color: var(--conz-nr-ink-2);
	cursor: pointer;
}

.conz-nr__countdown {
	position: relative;
	width: 168px;
	height: 168px;
	margin: 0 auto 1rem;
}

.conz-nr__countdown svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.conz-nr__countdown .conz-nr__ring-value {
	stroke: var(--conz-nr-primary);
	transition: stroke-dashoffset 250ms linear;
}

.conz-nr__countdown-time {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 2.4rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.conz-nr__breathe {
	margin: 0 0 .75rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--conz-nr-primary-text);
	transition: transform 1.5s ease;
}

.conz-nr__breathe.is-in {
	transform: scale(1.12);
}

.conz-nr__breathe.is-out {
	transform: scale(.94);
}

.conz-nr__motivation {
	margin: 0 0 1rem;
	font-size: 1.02rem;
	line-height: 1.45;
}

.conz-nr__craving-stats {
	margin: 0 0 1.5rem;
	font-size: .88rem;
	color: var(--conz-nr-ink-2);
}

.conz-nr__modal-actions {
	display: flex;
	gap: .6rem;
	justify-content: center;
	flex-wrap: wrap;
}

/* --------------------------------------------------------------
 * Hinweis-Einblendung
 * -------------------------------------------------------------- */

.conz-nr__toast {
	position: fixed;
	left: 50%;
	bottom: 1.5rem;
	z-index: 100000;
	transform: translateX(-50%);
	max-width: min(420px, calc(100vw - 2rem));
	padding: .85rem 1.25rem;
	border-radius: 999px;
	background: var(--conz-nr-emphasis);
	color: var(--conz-nr-emphasis-ink);
	font-size: .9rem;
	box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .8);
	animation: conz-nr-toast-in 260ms ease;
}

.conz-nr__toast.is-out {
	opacity: 0;
	transition: opacity 380ms ease;
}

@keyframes conz-nr-toast-in {
	from {
		opacity: 0;
		transform: translate(-50%, 12px);
	}
}

/* --------------------------------------------------------------
 * Kompakte Ansichten
 * -------------------------------------------------------------- */

.conz-nr--compact .conz-nr__hero,
.conz-nr--counter .conz-nr__hero {
	padding: 1.25rem;
	gap: 1rem;
}

.conz-nr--counter .conz-nr__ring,
.conz-nr--compact .conz-nr__ring {
	width: 96px;
	height: 96px;
}

.conz-nr--counter .conz-nr__ring-label strong,
.conz-nr--compact .conz-nr__ring-label strong {
	font-size: 1.6rem;
}

.conz-nr--compact .conz-nr__stats {
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.conz-nr--compact .conz-nr__stat {
	padding: .9rem;
}

.conz-nr--compact .conz-nr__stat-value {
	font-size: 1.15rem;
}

/* Im Widget wird es noch enger. */
.conz-nr-widget .conz-nr__hero {
	flex-direction: column;
	text-align: center;
}

.conz-nr-widget .conz-nr__setup {
	padding: 1.15rem;
}

/* --------------------------------------------------------------
 * Dunkler Modus
 * -------------------------------------------------------------- */

/*
 * Die hellen Werte stehen oben auf .conz-nr und gelten als Grundlage.
 * Dunkel greift in zwei Fällen, deshalb steht der Satz zweimal:
 *   1. Systemeinstellung dunkel und die Seite hat nicht auf hell festgelegt
 *   2. die Seite gibt dunkel vor (Einstellung "Farbschema")
 * Zusammenfassen ginge nur mit einer Selektorliste, die in Browsern ohne
 * Unterstützung für einen der Teile komplett ausfällt.
 */

@media (prefers-color-scheme: dark) {
	.conz-nr:not(.conz-nr--light) {
		--conz-nr-ink: #e2e8f0;
		--conz-nr-ink-2: #94a3b8;
		--conz-nr-ink-3: #94a3b8;
		--conz-nr-primary-text: #8bc34a;
		--conz-nr-surface: #1e293b;
		--conz-nr-surface-2: #0f172a;
		--conz-nr-border: #334155;
		--conz-nr-emphasis: #b91c1c;
		--conz-nr-emphasis-ink: #ffffff;
		--conz-nr-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .6);
	}

	.conz-nr:not(.conz-nr--light) .conz-nr__hero {
		background: linear-gradient(135deg, #1f2f1a 0%, #1e293b 60%);
	}

	.conz-nr:not(.conz-nr--light) .conz-nr__ring-track {
		stroke: rgba(226, 232, 240, .12);
	}

	.conz-nr:not(.conz-nr--light) .conz-nr__tool--craving {
		background: linear-gradient(135deg, #1e293b 0%, #2b1d1d 100%);
	}
}

.conz-nr--dark {
	--conz-nr-ink: #e2e8f0;
	--conz-nr-ink-2: #94a3b8;
	--conz-nr-ink-3: #94a3b8;
	--conz-nr-primary-text: #8bc34a;
	--conz-nr-surface: #1e293b;
	--conz-nr-surface-2: #0f172a;
	--conz-nr-border: #334155;
	--conz-nr-emphasis: #b91c1c;
	--conz-nr-emphasis-ink: #ffffff;
	--conz-nr-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .6);
}

.conz-nr--dark .conz-nr__hero {
	background: linear-gradient(135deg, #1f2f1a 0%, #1e293b 60%);
}

.conz-nr--dark .conz-nr__ring-track {
	stroke: rgba(226, 232, 240, .12);
}

.conz-nr--dark .conz-nr__tool--craving {
	background: linear-gradient(135deg, #1e293b 0%, #2b1d1d 100%);
}

/* --------------------------------------------------------------
 * Bewegung reduzieren
 * -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.conz-nr *,
	.conz-nr *::before,
	.conz-nr *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

@media (max-width: 600px) {
	.conz-nr {
		padding: 1rem;
	}

	.conz-nr__hero {
		flex-direction: column;
		text-align: center;
	}

	.conz-nr__score {
		flex-direction: row;
		gap: .5rem;
		align-items: baseline;
	}

	.conz-nr__ms {
		gap: .75rem;
		padding: .9rem 1rem;
	}
}

/* --------------------------------------------------------------
 * Vorschau im Themify-Builder-Editor
 * -------------------------------------------------------------- */

.conz-nr-preview__card {
	padding: 1.25rem 1.5rem;
	border: 1px dashed #cbd5e1;
	border-radius: 14px;
	background: linear-gradient(135deg, #f1f8e9 0%, #f8fafc 70%);
	color: #0f172a;
}

.conz-nr-preview__title {
	display: block;
	font-size: 1.05rem;
}

.conz-nr-preview__view {
	display: block;
	font-size: .82rem;
	color: #64748b;
}

.conz-nr-preview__note {
	margin: .75rem 0 0;
	font-size: .85rem;
	color: #475569;
}

.conz-nr-preview__goal {
	margin: .4rem 0 0;
	font-size: .82rem;
	font-weight: 600;
	color: #558b2f;
}