/**
 * Healthy Sicola für WordPress
 *
 * Farben, Schriftbild und Aufbau folgen SimoneStats: Türkis #03aead über
 * einem Verlauf nach #007777, Grundfläche #f3f3f3, Raleway für Überschriften
 * und Source Sans für den Fliesstext.
 */

.healthysicola-app,
.healthysicola-site {
	--hs-teal: #03aead;
	--hs-teal-light: #06bebd;
	--hs-teal-mid: #019493;
	--hs-teal-dark: #007777;
	--hs-teal-darker: #006666;
	--hs-bg: #f3f3f3;
	--hs-surface: #ffffff;
	--hs-line: #e0e0e0;
	--hs-dark: #404040;
	--hs-darker: #202020;
	--hs-muted: #767676;
	--hs-danger: #eb2f5e;
	--hs-warn: #febd69;
	--hs-warn-dark: #8a5a00;
	--hs-flame: #ff9600;
	--hs-flame-dark: #cc6a00;
	--hs-ok: #03aead;
	--hs-gradient: linear-gradient(130deg, #03aead 0%, #007777 80%, #007777 100%);
	--hs-radius: 8px;
	--hs-shadow: 0 1px 3px rgba(0, 0, 0, .09);
	--hs-heading-font: Raleway, "Segoe UI", system-ui, -apple-system, sans-serif;
	--hs-body-font: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, -apple-system, sans-serif;

	box-sizing: border-box;
	color: var(--hs-dark);
	font-family: var(--hs-body-font);
	font-size: 16px;
	line-height: 1.5;
}

.healthysicola-app *,
.healthysicola-app *::before,
.healthysicola-app *::after,
.healthysicola-site *,
.healthysicola-site *::before,
.healthysicola-site *::after {
	box-sizing: inherit;
}

.healthysicola-app h1,
.healthysicola-app h2,
.healthysicola-app h3,
.healthysicola-app h4,
.healthysicola-app h5,
.healthysicola-site h1,
.healthysicola-site h2,
.healthysicola-site h3,
.healthysicola-site h4,
.healthysicola-site h5 {
	font-family: var(--hs-heading-font);
	color: inherit;
}

.healthysicola-app .screen-reader-text,
.healthysicola-site .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.hs-icon {
	flex: none;
	vertical-align: middle;
}

.healthysicola-app [hidden] {
	display: none !important;
}

.hs-logo {
	display: block;
	border-radius: 22%;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.hs-logo-small {
	width: 28px;
	height: 28px;
	border-radius: 7px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

.hs-logo-gate {
	width: 96px;
	height: 96px;
	margin: 0 auto 16px;
}

.hs-logo-hero {
	width: 120px;
	height: 120px;
	margin-bottom: 22px;
	box-shadow: 0 14px 30px rgba(0, 0, 0, .3);
}

/* --------------------------------------------------------------------------
   Schaltflächen
   -------------------------------------------------------------------------- */

/* :where() hält die Spezifität tief, damit die Farbvarianten darunter greifen. */
:where(.healthysicola-app, .healthysicola-site) .hs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 18px;
	border: 1px solid transparent;
	border-radius: var(--hs-radius);
	background: var(--hs-surface);
	color: var(--hs-dark);
	font: inherit;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.healthysicola-app .hs-btn:focus-visible,
.healthysicola-site .hs-btn:focus-visible {
	outline: 3px solid var(--hs-teal-light);
	outline-offset: 2px;
}

.healthysicola-app .hs-btn[disabled] {
	opacity: .55;
	cursor: default;
}

.hs-btn-primary {
	background: var(--hs-teal);
	border-color: var(--hs-teal);
	color: #fff;
}

.hs-btn-primary:hover,
.hs-btn-primary:focus {
	background: var(--hs-teal-dark);
	border-color: var(--hs-teal-dark);
	color: #fff;
}

.hs-btn-ghost {
	background: transparent;
	border-color: var(--hs-line);
	color: var(--hs-dark);
}

.hs-btn-ghost:hover,
.hs-btn-ghost:focus {
	border-color: var(--hs-teal);
	color: var(--hs-teal-dark);
}

.hs-btn-danger {
	background: transparent;
	border-color: var(--hs-line);
	color: var(--hs-danger);
	margin-inline-start: auto;
}

.hs-btn-danger:hover,
.hs-btn-danger:focus {
	background: var(--hs-danger);
	border-color: var(--hs-danger);
	color: #fff;
}

.hs-btn-small {
	padding: 6px 12px;
	font-size: .88em;
}

.hs-btn-hero {
	background: var(--hs-teal-dark);
	border: 1px solid var(--hs-teal-darker);
	color: #f3f3f3;
	font-size: 1.05em;
	padding: 14px 28px;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.hs-btn-hero:hover,
.hs-btn-hero:focus {
	background: var(--hs-teal);
	color: #fff;
}

.hs-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.hs-icon-btn:hover {
	background: rgba(0, 0, 0, .06);
}

.hs-icon-btn.is-active {
	color: var(--hs-teal-dark);
	background: rgba(3, 174, 173, .12);
}

/* --------------------------------------------------------------------------
   App: Reiter
   -------------------------------------------------------------------------- */

.healthysicola-app {
	background: var(--hs-bg);
	border-radius: var(--hs-radius);
	overflow: hidden;
}

.hs-mobile-head {
	display: none;
}

.hs-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	background: var(--hs-teal);
	border-bottom: 2px solid var(--hs-teal-dark);
	padding: 0 8px;
}

.hs-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 16px 14px;
	border: 0;
	border-bottom: 3px solid transparent;
	background: transparent;
	color: #e6f7f7;
	font: inherit;
	font-family: var(--hs-heading-font);
	font-weight: 600;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease;
}

.hs-tab:hover {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, .5);
}

.hs-tab.is-active {
	color: #fff;
	border-bottom-color: #e3e3e3;
}

.hs-view {
	padding: 20px;
}

/* --------------------------------------------------------------------------
   Werkzeugleiste, Formulare
   -------------------------------------------------------------------------- */

.hs-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.hs-search {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 220px;
	padding: 0 12px;
	background: var(--hs-surface);
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-radius);
	color: var(--hs-muted);
}

.hs-search:focus-within {
	border-color: var(--hs-teal);
	box-shadow: 0 0 0 3px rgba(6, 190, 189, .25);
}

.hs-search input {
	flex: 1;
	min-width: 0;
	padding: 10px 0;
	border: 0;
	background: transparent;
	color: var(--hs-dark);
	font: inherit;
}

.hs-search input:focus {
	outline: none;
}

.hs-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.healthysicola-app select,
.healthysicola-app input[type="text"],
.healthysicola-app input[type="search"],
.healthysicola-app input[type="number"],
.healthysicola-app input[type="date"],
.healthysicola-app input[type="time"],
.healthysicola-app textarea {
	padding: 9px 10px;
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-radius);
	background: var(--hs-surface);
	color: var(--hs-dark);
	font: inherit;
	max-width: 100%;
	min-height: 0;
	line-height: 1.3;
}

.healthysicola-app select:focus,
.healthysicola-app input:focus,
.healthysicola-app textarea:focus {
	outline: none;
	border-color: var(--hs-teal);
	box-shadow: 0 0 0 3px rgba(6, 190, 189, .25);
}

.healthysicola-app input[type="range"] {
	width: 100%;
	accent-color: var(--hs-teal);
}

.hs-field-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 14px;
}

.hs-field-grid-tight {
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px;
}

.hs-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
}

.hs-field > span:first-child,
.hs-field-label {
	font-size: .82rem;
	font-weight: 600;
	color: var(--hs-muted);
}

.hs-field > span:first-child .hs-icon {
	margin-right: 2px;
	vertical-align: -2px;
}

.hs-field-wide {
	grid-column: 1 / -1;
}

.hs-field-range output {
	font-weight: 700;
	color: var(--hs-teal-dark);
	margin-left: 4px;
}

.hs-required {
	color: var(--hs-danger);
}

.hs-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--hs-line);
}

.hs-hint {
	color: var(--hs-muted);
	font-size: .88rem;
}

.hs-check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .92rem;
	cursor: pointer;
	margin: 6px 0 0;
}

.hs-check input {
	accent-color: var(--hs-teal);
	width: 18px;
	height: 18px;
	margin: 0;
}

.hs-count {
	margin: 0 0 12px;
	color: var(--hs-muted);
	font-size: .9em;
}

.hs-notice {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	padding: 12px 16px;
	background: rgba(254, 189, 105, .25);
	border: 1px solid rgba(254, 189, 105, .6);
	border-radius: var(--hs-radius);
	color: var(--hs-warn-dark);
	font-weight: 600;
}

/* Segment-Schalter (Kraft / Training / Aktivität, Alkohol, Kohlenhydrate) */

.hs-seg {
	display: inline-flex;
	flex-wrap: wrap;
	max-width: 100%;
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-radius);
	overflow: hidden;
	background: var(--hs-surface);
}

.hs-seg-wrap {
	flex-wrap: wrap;
}

.hs-seg button {
	display: inline-flex;
	flex: 1 1 auto;
	justify-content: center;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border: 0;
	border-right: 1px solid var(--hs-line);
	background: transparent;
	color: var(--hs-muted);
	font: inherit;
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
}

.hs-seg button:last-child {
	border-right: 0;
}

.hs-seg button.is-active {
	background: var(--hs-teal);
	color: #fff;
}

.hs-seg-kind {
	margin-bottom: 6px;
}

.hs-kind-hint {
	margin: 0 0 12px;
	min-height: 1.2em;
}

.hs-seg-row {
	margin-top: 16px;
}

.hs-seg-title {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
	font-size: .82rem;
	font-weight: 600;
	color: var(--hs-muted);
}

.hs-seg-row .hs-hint {
	display: block;
	margin-top: 4px;
}

/* Kippschalter im Tagebuch */

.hs-switches {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hs-switch {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	background: var(--hs-bg);
	border-radius: var(--hs-radius);
	cursor: pointer;
	position: relative;
}

.hs-switch input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.hs-switch-icon {
	display: inline-flex;
	color: var(--hs-teal-dark);
}

.hs-switch-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.hs-switch-text small {
	color: var(--hs-muted);
	font-size: .8rem;
}

.hs-switch-track {
	position: relative;
	width: 42px;
	height: 24px;
	border-radius: 999px;
	background: #cfcfcf;
	transition: background-color .15s ease;
}

.hs-switch-track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
	transition: transform .15s ease;
}

.hs-switch input:checked ~ .hs-switch-track {
	background: var(--hs-danger);
}

.hs-switch input:checked ~ .hs-switch-track::after {
	transform: translateX(18px);
}

.hs-switch input:focus-visible ~ .hs-switch-track {
	outline: 3px solid var(--hs-teal-light);
	outline-offset: 2px;
}

.hs-switch-joker {
	margin-top: 16px;
	background: rgba(254, 189, 105, .2);
}

.hs-switch-joker .hs-switch-icon {
	color: var(--hs-warn-dark);
}

.hs-switch-joker input:checked ~ .hs-switch-track {
	background: var(--hs-warn-dark);
}

.hs-fasting {
	margin-top: 16px;
	padding: 12px;
	background: var(--hs-bg);
	border-radius: var(--hs-radius);
}

.hs-fasting-result {
	margin: 8px 0 0;
	font-size: .9rem;
	font-weight: 600;
}

.hs-fasting-result.is-ok {
	color: var(--hs-teal-dark);
}

.hs-fasting-result.is-fail {
	color: var(--hs-danger);
}

.hs-fasting-result.is-none {
	color: var(--hs-muted);
	font-weight: 400;
}

.hs-more {
	margin-top: 16px;
}

.hs-more > summary {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: .9rem;
	font-weight: 600;
	color: var(--hs-teal-dark);
	cursor: pointer;
	list-style: none;
}

.hs-more > summary::-webkit-details-marker {
	display: none;
}

.hs-more[open] > summary {
	margin-bottom: 12px;
}

.hs-autosave {
	margin: 12px 0 0;
	min-height: 1.3em;
	font-size: .82rem;
	color: var(--hs-muted);
	text-align: right;
}

/* --------------------------------------------------------------------------
   Tages- und Wochennavigation
   -------------------------------------------------------------------------- */

.hs-daynav,
.hs-weeknav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
}

.hs-daynav-title,
.hs-weeknav-title {
	display: flex;
	flex-direction: column;
	min-width: 180px;
	line-height: 1.2;
}

.hs-daynav-title strong,
.hs-weeknav-title strong {
	font-family: var(--hs-heading-font);
	font-size: 1.25rem;
}

.hs-daynav-title span,
.hs-weeknav-title span {
	color: var(--hs-muted);
	font-size: .88rem;
}

.hs-daynav-pick {
	margin-inline-start: auto;
}

.hs-weeknav .hs-btn-primary {
	margin-inline-start: auto;
}

.hs-weekstrip {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	margin-bottom: 18px;
}

.hs-daychip {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 8px 4px;
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-radius);
	background: var(--hs-surface);
	color: var(--hs-dark);
	font: inherit;
	cursor: pointer;
}

.hs-daychip small {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--hs-muted);
}

.hs-daychip strong {
	font-family: var(--hs-heading-font);
	font-size: 1.05rem;
}

.hs-daychip.is-selected {
	border-color: var(--hs-teal);
	box-shadow: 0 0 0 2px rgba(3, 174, 173, .3);
}

.hs-daychip.is-today strong {
	color: var(--hs-teal-dark);
}

.hs-daychip.is-future {
	opacity: .5;
	cursor: default;
}

.hs-daychip-dots {
	display: flex;
	gap: 3px;
	min-height: 6px;
}

.hs-daychip-dots i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--hs-line);
}

.hs-daychip-dots i.is-ok {
	background: var(--hs-teal);
}

.hs-daychip-dots i.is-fail {
	background: var(--hs-danger);
}

.hs-daychip-dots i.is-joker {
	background: var(--hs-warn);
}

.hs-daychip-dots i.is-move {
	background: var(--hs-teal-dark);
}

/* --------------------------------------------------------------------------
   Streak (Duolingo-Art)
   -------------------------------------------------------------------------- */

.hs-streak {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 14px;
	align-items: center;
	margin-bottom: 14px;
	padding: 14px 18px;
	background: var(--hs-surface);
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-radius);
	box-shadow: var(--hs-shadow);
}

.hs-streak.is-hot {
	background: linear-gradient(130deg, #fff4e3 0%, #ffe6c2 100%);
	border-color: rgba(255, 150, 0, .35);
}

.hs-streak.is-risk {
	background: linear-gradient(130deg, #fff9f0 0%, #fff1dc 100%);
	border-color: rgba(255, 150, 0, .5);
}

.hs-streak-flame {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--hs-bg);
	color: #b0b0b0;
}

.hs-streak.is-hot .hs-streak-flame {
	background: rgba(255, 150, 0, .18);
	color: var(--hs-flame);
	animation: hs-flicker 1.6s ease-in-out infinite alternate;
}

.hs-streak.is-risk .hs-streak-flame {
	background: rgba(255, 150, 0, .12);
	color: var(--hs-flame-dark);
}

@keyframes hs-flicker {
	from { transform: scale(1); }
	to { transform: scale(1.08) rotate(-3deg); }
}

.hs-streak-count {
	display: flex;
	align-items: baseline;
	gap: 8px;
	line-height: 1;
}

.hs-streak-count strong {
	font-family: var(--hs-heading-font);
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--hs-flame-dark);
}

.hs-streak:not(.is-hot):not(.is-risk) .hs-streak-count strong {
	color: var(--hs-muted);
}

.hs-streak-count span {
	font-weight: 600;
	color: var(--hs-dark);
}

.hs-streak-text {
	margin: 4px 0 0;
	font-size: .88rem;
	color: var(--hs-muted);
}

.hs-streak-side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	font-size: .8rem;
	color: var(--hs-muted);
	white-space: nowrap;
}

.hs-streak-side strong {
	font-family: var(--hs-heading-font);
	color: var(--hs-dark);
}

.hs-streak-week {
	display: inline-flex;
	gap: 4px;
}

.hs-streak-week i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--hs-bg);
	color: #c8c8c8;
	font-size: .66rem;
	font-style: normal;
	font-weight: 700;
}

.hs-streak-week i.is-ok {
	background: var(--hs-flame);
	color: #fff;
}

.hs-streak-week i.is-joker {
	background: var(--hs-warn);
	color: #fff;
}

.hs-streak-week i.is-fail {
	background: rgba(235, 47, 94, .15);
	color: var(--hs-danger);
}

.hs-streak-week i.is-today {
	outline: 2px solid var(--hs-flame-dark);
	outline-offset: 1px;
}

.hs-tile.hs-tile-flame {
	background: linear-gradient(130deg, #ff9600 0%, #e05a00 100%);
	border-color: transparent;
	color: #fff;
}

.hs-tile.hs-tile-flame .hs-tile-label,
.hs-tile.hs-tile-flame .hs-tile-sub {
	color: rgba(255, 255, 255, .88);
}

.hs-calendar {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 5px;
	margin-top: 8px;
}

.hs-calendar-head {
	font-size: .7rem;
	font-weight: 600;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--hs-muted);
}

.hs-calendar-day {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	border-radius: 8px;
	background: var(--hs-bg);
	color: var(--hs-muted);
	font-size: .78rem;
	font-weight: 600;
}

.hs-calendar-day.is-ok {
	background: var(--hs-flame);
	color: #fff;
}

.hs-calendar-day.is-joker {
	background: var(--hs-warn);
	color: #fff;
}

.hs-calendar-day.is-fail {
	background: rgba(235, 47, 94, .18);
	color: var(--hs-danger);
}

.hs-calendar-day.is-future {
	opacity: .35;
}

.hs-calendar-day.is-today {
	outline: 2px solid var(--hs-flame-dark);
	outline-offset: 1px;
}

.hs-calendar-legend {
	margin-top: 10px;
	font-size: .78rem;
}

.hs-calendar-legend .is-ok { background: var(--hs-flame); }
.hs-calendar-legend .is-joker { background: var(--hs-warn); }
.hs-calendar-legend .is-fail { background: rgba(235, 47, 94, .35); }
.hs-calendar-legend .is-none { background: var(--hs-line); }

.hs-milestones {
	margin: 10px 0 0;
	font-size: .86rem;
	color: var(--hs-dark);
}

/* Persönliche Ziele */

.hs-goals {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hs-goal {
	display: grid;
	grid-template-columns: 32px 1fr auto;
	gap: 10px;
	align-items: center;
	padding: 8px 10px;
	background: var(--hs-bg);
	border-radius: var(--hs-radius);
	font-size: .9rem;
}

.hs-goal.is-inactive {
	opacity: .55;
}

.hs-goal-icon {
	display: inline-flex;
	color: var(--hs-teal-dark);
}

.hs-goal-body strong {
	font-family: var(--hs-heading-font);
	font-weight: 600;
}

.hs-goal-meta {
	display: block;
	font-size: .8rem;
	color: var(--hs-muted);
}

.hs-goals-fields {
	margin-top: 16px;
}

.hs-goals-fields[hidden] {
	display: none;
}

.hs-switch-good input:checked ~ .hs-switch-track {
	background: var(--hs-teal);
}

.hs-switch-good .hs-switch-icon {
	color: var(--hs-teal-dark);
}

.hs-goal-number {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	background: var(--hs-bg);
	border-radius: var(--hs-radius);
}

.hs-goal-number .hs-switch-icon {
	display: inline-flex;
	color: var(--hs-teal-dark);
}

.hs-goal-number .hs-switch-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.hs-goal-number .hs-switch-text small {
	color: var(--hs-muted);
	font-size: .8rem;
}

.hs-goal-number-input {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .84rem;
	color: var(--hs-muted);
}

.hs-goal-number-input input {
	width: 84px;
	padding: 7px 8px;
	text-align: right;
}

.hs-iconpick {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.hs-iconpick-item {
	position: relative;
	cursor: pointer;
}

.hs-iconpick-item input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.hs-iconpick-item span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-radius);
	background: var(--hs-surface);
	color: var(--hs-dark);
}

.hs-iconpick-item input:checked + span {
	background: var(--hs-teal);
	border-color: var(--hs-teal);
	color: #fff;
}

.hs-iconpick-item input:focus-visible + span {
	outline: 3px solid var(--hs-teal-light);
}

/* --------------------------------------------------------------------------
   Gewohnheiten (Streaks-Kacheln)
   -------------------------------------------------------------------------- */

.hs-habits-summary {
	margin: 0;
	color: var(--hs-muted);
	font-size: .9rem;
}

.hs-habit-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
	margin-bottom: 12px;
}

.hs-habit {
	--habit: var(--hs-teal);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 16px 12px 14px;
	background: var(--hs-surface);
	border: 1px solid var(--hs-line);
	border-radius: 16px;
	box-shadow: var(--hs-shadow);
	text-align: center;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.hs-habit.is-done {
	background: var(--habit);
	border-color: transparent;
	color: #fff;
}

.hs-habit.is-done .hs-habit-title,
.hs-habit.is-done .hs-habit-sub,
.hs-habit.is-done .hs-habit-streak {
	color: #fff;
}

.hs-habit.is-missed {
	opacity: .85;
}

.hs-habit.is-skip {
	opacity: .6;
}

.hs-habit-ring {
	position: relative;
	width: 96px;
	height: 96px;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	border-radius: 50%;
	transition: transform .1s ease;
}

.hs-habit-ring:active {
	transform: scale(.94);
}

.hs-habit-ring:focus-visible {
	outline: 3px solid var(--hs-teal-light);
	outline-offset: 3px;
}

.hs-habit-ring > svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.hs-habit-track {
	fill: none;
	stroke: rgba(0, 0, 0, .08);
	stroke-width: 7;
}

.hs-habit.is-done .hs-habit-track {
	stroke: rgba(255, 255, 255, .3);
}

.hs-habit-fill {
	fill: none;
	stroke: var(--habit);
	stroke-width: 7;
	stroke-linecap: round;
	transition: stroke-dashoffset .3s ease;
}

.hs-habit.is-done .hs-habit-fill {
	stroke: #fff;
}

.hs-habit-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--habit);
}

.hs-habit.is-done .hs-habit-icon {
	color: #fff;
}

.hs-habit-icon .hs-icon {
	width: 38px;
	height: 38px;
}

.hs-habit-check {
	position: absolute;
	right: 2px;
	bottom: 2px;
	display: none;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #fff;
	color: var(--habit);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

.hs-habit.is-done .hs-habit-check {
	display: flex;
}

.hs-habit-value {
	position: absolute;
	left: 50%;
	bottom: 4px;
	transform: translateX(-50%);
	font-family: var(--hs-heading-font);
	font-weight: 700;
	font-size: .78rem;
	color: var(--hs-dark);
	background: var(--hs-surface);
	padding: 1px 6px;
	border-radius: 999px;
	white-space: nowrap;
}

.hs-habit.is-done .hs-habit-value {
	color: var(--habit);
}

.hs-habit-title {
	margin: 0;
	max-width: 100%;
	font-family: var(--hs-heading-font);
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.25;
	color: var(--hs-dark);
	overflow-wrap: anywhere;
	hyphens: auto;
}

.hs-habit-sub {
	margin: 0;
	font-size: .76rem;
	color: var(--hs-muted);
	min-height: 1.2em;
}

.hs-habit-streak {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--hs-heading-font);
	font-weight: 700;
	font-size: .95rem;
	color: var(--hs-flame-dark);
}

.hs-habit-streak .hs-icon {
	width: 16px;
	height: 16px;
}

.hs-habit-streak.is-zero {
	color: var(--hs-muted);
}

.hs-habit-tools {
	position: absolute;
	top: 6px;
	right: 6px;
	display: flex;
	gap: 2px;
}

.hs-habit-tools .hs-icon-btn {
	width: 30px;
	height: 30px;
	color: var(--hs-muted);
}

.hs-habit.is-done .hs-habit-tools .hs-icon-btn {
	color: rgba(255, 255, 255, .85);
}

.hs-habit-tools .hs-icon-btn:hover {
	background: rgba(0, 0, 0, .08);
}

.hs-habit-steppers {
	display: flex;
	gap: 6px;
}

.hs-habit-steppers button {
	min-width: 40px;
	padding: 4px 10px;
	border: 1px solid var(--hs-line);
	border-radius: 999px;
	background: var(--hs-surface);
	color: var(--hs-dark);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.hs-habit.is-done .hs-habit-steppers button {
	border-color: rgba(255, 255, 255, .5);
	background: rgba(255, 255, 255, .15);
	color: #fff;
}

.hs-habits-help {
	margin: 0 0 16px;
}

.hs-reminder-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
}

/* Statistik-Dialog */

.hs-habit-stats-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 10px;
	margin-bottom: 16px;
}

.hs-habit-stat {
	padding: 10px 12px;
	background: var(--hs-bg);
	border-radius: var(--hs-radius);
}

.hs-habit-stat span {
	display: block;
	font-size: .72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--hs-muted);
}

.hs-habit-stat strong {
	display: block;
	font-family: var(--hs-heading-font);
	font-size: 1.4rem;
}

.hs-habit-stats h5 {
	margin: 14px 0 6px;
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--hs-muted);
}

.hs-habit-calendar {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	max-width: 360px;
}

.hs-habit-calendar span {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	border-radius: 7px;
	background: var(--hs-bg);
	font-size: .74rem;
	font-weight: 600;
	color: var(--hs-muted);
}

.hs-habit-calendar .is-done,
.hs-habit-calendar .is-clean {
	background: var(--habit, var(--hs-teal));
	color: #fff;
}

.hs-habit-calendar .is-excused {
	background: var(--hs-warn);
	color: #fff;
}

.hs-habit-calendar .is-missed,
.hs-habit-calendar .is-used {
	background: rgba(235, 47, 94, .18);
	color: var(--hs-danger);
}

.hs-habit-calendar .is-used {
	background: rgba(254, 189, 105, .35);
	color: var(--hs-warn-dark);
}

.hs-habit-calendar .is-pending {
	outline: 2px solid var(--habit, var(--hs-teal));
	outline-offset: -2px;
}

.hs-habit-calendar .is-future,
.hs-habit-calendar .is-skip {
	opacity: .35;
}

.hs-habit-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--hs-line);
}

/* Farb- und Wochentagswahl im Dialog */

.hs-colorpick {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.hs-colorpick-item {
	position: relative;
	cursor: pointer;
}

.hs-colorpick-item input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.hs-colorpick-item span {
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 3px solid transparent;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .1) inset;
}

.hs-colorpick-item input:checked + span {
	border-color: var(--hs-dark);
}

.hs-colorpick-item input:focus-visible + span {
	outline: 3px solid var(--hs-teal-light);
}

.hs-weekdaypick .hs-chip span {
	min-width: 40px;
	text-align: center;
}

/* Timer */

.hs-timer {
	text-align: center;
}

.hs-timer-ring {
	position: relative;
	width: 200px;
	height: 200px;
	margin: 0 auto 10px;
}

.hs-timer-ring svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.hs-timer-track {
	fill: none;
	stroke: var(--hs-bg);
	stroke-width: 8;
}

.hs-timer-fill {
	fill: none;
	stroke: var(--habit, var(--hs-teal));
	stroke-width: 8;
	stroke-linecap: round;
	transition: stroke-dashoffset .5s linear;
}

.hs-timer-display {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--hs-heading-font);
	font-size: 2.4rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.hs-timer-goal {
	margin: 0 0 14px;
	color: var(--hs-muted);
}

.hs-timer-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   Kacheln, Panels, Diagramme
   -------------------------------------------------------------------------- */

.hs-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin-bottom: 18px;
}

.hs-tile {
	padding: 16px;
	background: var(--hs-surface);
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-radius);
	box-shadow: var(--hs-shadow);
}

.hs-tile-accent {
	background: var(--hs-gradient);
	border-color: transparent;
	color: #f3f3f3;
}

.hs-tile-accent .hs-tile-label,
.hs-tile-accent .hs-tile-sub,
.hs-tile-accent .hs-tile-sub.is-up,
.hs-tile-accent .hs-tile-sub.is-down {
	color: rgba(255, 255, 255, .85);
}

.hs-tile-label {
	display: block;
	font-size: .8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--hs-muted);
}

.hs-tile-label .hs-icon {
	vertical-align: -2px;
}

.hs-tile-value {
	display: block;
	margin: 6px 0 2px;
	font-family: var(--hs-heading-font);
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.1;
}

.hs-tile-value small {
	font-size: .55em;
	font-weight: 600;
	opacity: .8;
}

.hs-tile-sub {
	display: block;
	font-size: .82rem;
	color: var(--hs-muted);
	overflow-wrap: anywhere;
}

.hs-tile-sub.is-up {
	color: var(--hs-danger);
}

.hs-tile-sub.is-down {
	color: var(--hs-teal-dark);
}

.hs-panels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 16px;
	margin-bottom: 16px;
}

.hs-panels-2 {
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.hs-panel {
	padding: 16px;
	background: var(--hs-surface);
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-radius);
	box-shadow: var(--hs-shadow);
	min-width: 0;
}

.hs-panel + .hs-panel,
.hs-panels + .hs-panel,
.hs-panel + .hs-panels {
	margin-top: 16px;
}

.hs-panel h4 {
	margin: 0 0 4px;
	font-size: 1rem;
	display: flex;
	align-items: center;
	gap: 6px;
}

.hs-panel-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.hs-panel-head h4 {
	margin: 0;
}

.hs-panel-note {
	margin: 0 0 10px;
	font-size: .84rem;
	color: var(--hs-muted);
}

.hs-chart {
	margin-top: 10px;
	overflow-x: auto;
}

.hs-chart svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.hs-chart-empty {
	padding: 24px 0;
	color: var(--hs-muted);
	font-size: .88rem;
	text-align: center;
}

.hs-chart-bar {
	fill: var(--hs-teal);
	transition: fill .15s ease;
}

.hs-chart-bar:hover {
	fill: var(--hs-teal-dark);
}

.hs-chart-bar.is-second {
	fill: var(--hs-teal-dark);
}

.hs-chart-bar.is-third {
	fill: #9fd8d8;
}

.hs-chart-bar.is-fail {
	fill: var(--hs-danger);
}

.hs-chart-bar.is-current {
	fill: var(--hs-warn);
}

.hs-chart-line {
	fill: none;
	stroke: var(--hs-teal-dark);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hs-chart-line.is-second {
	stroke: var(--hs-warn-dark);
}

.hs-chart-line.is-third {
	stroke: #9fd8d8;
}

.hs-chart-area {
	fill: rgba(3, 174, 173, .15);
}

.hs-chart-dot {
	fill: var(--hs-teal-dark);
}

.hs-chart-dot.is-second {
	fill: var(--hs-warn-dark);
}

.hs-chart-dot.is-third {
	fill: #9fd8d8;
}

.hs-chart-axis {
	stroke: var(--hs-line);
	stroke-width: 1;
}

.hs-chart-target {
	stroke: var(--hs-danger);
	stroke-width: 1;
	stroke-dasharray: 3 3;
}

.hs-chart-label {
	fill: var(--hs-muted);
	font-size: 10px;
	font-family: var(--hs-body-font);
}

.hs-chart-value {
	fill: var(--hs-dark);
	font-size: 10px;
	font-weight: 600;
	font-family: var(--hs-body-font);
}

.hs-rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.hs-row {
	display: grid;
	grid-template-columns: minmax(80px, 40%) 1fr auto;
	gap: 10px;
	align-items: center;
	font-size: .86rem;
}

.hs-row-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hs-row-track {
	height: 10px;
	background: var(--hs-bg);
	border-radius: 999px;
	overflow: hidden;
}

.hs-row-fill {
	display: block;
	height: 100%;
	background: var(--hs-teal);
	border-radius: 999px;
}

.hs-row-value {
	font-weight: 600;
	color: var(--hs-muted);
	font-variant-numeric: tabular-nums;
}

.hs-donut-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}

.hs-donut-wrap svg {
	width: 140px;
	flex: none;
}

.hs-legend {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .86rem;
}

.hs-legend li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.hs-legend .hs-swatch {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	flex: none;
}

.hs-legend-inline {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 6px;
}

/* --------------------------------------------------------------------------
   Regelboard
   -------------------------------------------------------------------------- */

.hs-board {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hs-rule {
	display: grid;
	grid-template-columns: 36px 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 10px 12px;
	background: var(--hs-bg);
	border-radius: var(--hs-radius);
	border-left: 4px solid var(--hs-line);
}

.hs-rule.is-ok {
	border-left-color: var(--hs-teal);
}

.hs-rule.is-fail {
	border-left-color: var(--hs-danger);
}

.hs-rule.is-open {
	border-left-color: var(--hs-warn);
}

.hs-rule-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--hs-surface);
	color: var(--hs-teal-dark);
}

.hs-rule.is-fail .hs-rule-icon {
	color: var(--hs-danger);
}

.hs-rule-body {
	min-width: 0;
}

.hs-rule-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 10px;
	font-family: var(--hs-heading-font);
	font-weight: 600;
	font-size: .95rem;
}

.hs-rule-desc {
	display: block;
	margin: 2px 0 6px;
	font-size: .82rem;
	color: var(--hs-muted);
}

.hs-board-compact .hs-rule-desc {
	display: none;
}

.hs-rule-track {
	height: 8px;
	background: var(--hs-surface);
	border-radius: 999px;
	overflow: hidden;
}

.hs-rule-fill {
	display: block;
	height: 100%;
	background: var(--hs-teal);
	border-radius: 999px;
	transition: width .2s ease;
}

.hs-rule.is-fail .hs-rule-fill {
	background: var(--hs-danger);
}

.hs-rule.is-open .hs-rule-fill {
	background: var(--hs-warn);
}

.hs-rule-note {
	display: block;
	margin-top: 6px;
	font-size: .8rem;
	color: var(--hs-muted);
}

.hs-rule-note.is-fail {
	color: var(--hs-danger);
}

.hs-rule-days {
	display: inline-flex;
	gap: 3px;
	margin-left: 6px;
	vertical-align: middle;
}

.hs-rule-days i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--hs-line);
}

.hs-rule-days i.is-ok {
	background: var(--hs-teal);
}

.hs-rule-days i.is-fail {
	background: var(--hs-danger);
}

.hs-rule-days i.is-joker {
	background: var(--hs-warn);
}

.hs-rule-side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	white-space: nowrap;
}

.hs-rule-value {
	font-family: var(--hs-heading-font);
	font-weight: 700;
	font-size: 1.15rem;
	font-variant-numeric: tabular-nums;
}

.hs-rule-value small {
	font-size: .7em;
	font-weight: 600;
	color: var(--hs-muted);
}

.hs-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--hs-bg);
	color: var(--hs-dark);
	font-size: .72rem;
	font-weight: 600;
	white-space: nowrap;
}

.hs-badge-ok {
	background: rgba(3, 174, 173, .15);
	color: var(--hs-teal-dark);
}

.hs-badge-open {
	background: rgba(254, 189, 105, .3);
	color: var(--hs-warn-dark);
}

.hs-badge-fail {
	background: rgba(235, 47, 94, .12);
	color: #a01338;
}

.hs-badge-none {
	background: var(--hs-line);
	color: var(--hs-muted);
}

.hs-badge-carbs {
	background: rgba(254, 189, 105, .3);
	color: var(--hs-warn-dark);
}

.hs-badge-protein {
	background: rgba(3, 174, 173, .15);
	color: var(--hs-teal-dark);
}

.hs-week-badge {
	font-size: .8rem;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--hs-bg);
	color: var(--hs-muted);
}

.hs-week-badge.is-ok {
	background: rgba(3, 174, 173, .15);
	color: var(--hs-teal-dark);
}

.hs-week-badge.is-fail {
	background: rgba(235, 47, 94, .12);
	color: #a01338;
}

.hs-week-badge.is-open {
	background: rgba(254, 189, 105, .3);
	color: var(--hs-warn-dark);
}

.hs-rule-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: .9rem;
}

.hs-rule-list li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.hs-rule-list .hs-icon {
	color: var(--hs-teal-dark);
	margin-top: 2px;
}

/* Aktualisieren */

.hs-update-status {
	margin: 0 0 8px;
	font-size: .9rem;
	color: var(--hs-muted);
}

.hs-update-status code {
	background: var(--hs-bg);
	padding: 1px 6px;
	border-radius: 4px;
	font-size: .85em;
}

.hs-update-result {
	margin: 0 0 8px;
	padding: 10px 12px;
	border-radius: var(--hs-radius);
	background: rgba(3, 174, 173, .12);
	color: var(--hs-teal-dark);
	font-weight: 600;
}

.hs-update-result.is-error {
	background: rgba(235, 47, 94, .12);
	color: #a01338;
}

.hs-update .hs-form-actions {
	margin-top: 6px;
	padding-top: 0;
	border-top: 0;
}

.hs-update .hs-btn[disabled] {
	opacity: .55;
	cursor: default;
}

/* Pausen & Ferien */

.hs-break-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
}

.hs-break-form .hs-field-grow {
	flex: 1 1 160px;
}

.hs-breaks {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hs-break {
	display: grid;
	grid-template-columns: 32px 1fr auto;
	gap: 10px;
	align-items: center;
	padding: 8px 10px;
	background: rgba(59, 130, 196, .1);
	border-radius: var(--hs-radius);
	font-size: .9rem;
}

.hs-break.is-active {
	background: rgba(59, 130, 196, .22);
}

.hs-break .hs-activity-icon {
	color: #3b82c4;
}

.hs-daychip-dots i.is-break,
.hs-calendar-day.is-break,
.hs-calendar-legend .is-break {
	background: #9cc6e6;
	color: #1f4f78;
}

.hs-streak.is-break {
	background: linear-gradient(130deg, #eaf4fb 0%, #d8eaf7 100%);
	border-color: rgba(59, 130, 196, .35);
}

.hs-streak.is-break .hs-streak-flame {
	background: rgba(59, 130, 196, .15);
	color: #3b82c4;
}

.hs-streak.is-break .hs-streak-count strong {
	color: #3b82c4;
}

.hs-week-badge.is-paused {
	background: rgba(59, 130, 196, .18);
	color: #1f4f78;
}

.hs-daychip.is-break {
	background: #eaf4fb;
}

.hs-chart-bar.is-paused {
	fill: #9cc6e6;
}

.hs-habits-break {
	margin: 0 0 12px;
	padding: 10px 14px;
	border-radius: var(--hs-radius);
	background: rgba(59, 130, 196, .12);
	color: #1f4f78;
	font-weight: 600;
}

/* Mein Programm */

.hs-program-rules {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hs-program-rule {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	padding: 8px 12px;
	background: var(--hs-bg);
	border-radius: var(--hs-radius);
	font-size: .92rem;
}

.hs-program-rule .hs-check {
	margin: 0;
	font-weight: 600;
}

.hs-program-rule .hs-check .hs-icon {
	color: var(--hs-teal-dark);
	vertical-align: -3px;
	margin-right: 2px;
}

.hs-program-inputs {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	color: var(--hs-muted);
	font-size: .86rem;
}

.hs-program-inputs input[type="number"] {
	width: 64px;
	padding: 6px 8px;
	text-align: right;
}

.hs-program-inputs .hs-check {
	font-weight: 400;
	margin-left: 8px;
}

.hs-program-stand {
	font-family: var(--hs-heading-font);
	font-size: 1.05rem;
	color: var(--hs-teal-dark);
	padding-top: 6px;
}

.hs-program-rule.is-off {
	opacity: .55;
}

/* Haushalt */

.hs-household {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
}

.hs-member {
	padding: 12px;
	background: var(--hs-bg);
	border-radius: var(--hs-radius);
}

.hs-member.is-me {
	outline: 2px solid rgba(3, 174, 173, .35);
}

.hs-member-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.hs-member-head strong {
	font-family: var(--hs-heading-font);
}

.hs-member-streak {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: .82rem;
	color: var(--hs-muted);
}

.hs-member-rules {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.hs-member-rule {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--hs-surface);
	font-size: .76rem;
	font-weight: 600;
	color: var(--hs-muted);
}

.hs-member-rule.is-ok {
	color: var(--hs-teal-dark);
}

.hs-member-rule.is-fail {
	color: var(--hs-danger);
}

.hs-member-rule.is-open {
	color: var(--hs-warn-dark);
}

/* Bilanz: was klappt */

.hs-adherence {
	display: grid;
	gap: 14px;
}

.hs-adherence h5 {
	margin: 0 0 6px;
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--hs-muted);
}

.hs-adherence .hs-row-fill.is-low {
	background: var(--hs-danger);
}

.hs-adherence .hs-row-fill.is-mid {
	background: var(--hs-warn);
}

/* --------------------------------------------------------------------------
   Aktivitätslisten und Tabellen
   -------------------------------------------------------------------------- */

.hs-activity-list {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hs-activity {
	display: grid;
	grid-template-columns: 32px 1fr auto;
	gap: 10px;
	align-items: center;
	padding: 8px 10px;
	background: var(--hs-bg);
	border-radius: var(--hs-radius);
	font-size: .9rem;
}

.hs-activity-icon {
	display: inline-flex;
	color: var(--hs-teal-dark);
}

.hs-activity.is-activity .hs-activity-icon {
	color: var(--hs-muted);
}

.hs-activity-body strong {
	font-family: var(--hs-heading-font);
	font-weight: 600;
}

.hs-activity-meta {
	display: block;
	font-size: .8rem;
	color: var(--hs-muted);
}

.hs-activity-actions {
	display: inline-flex;
	gap: 2px;
}

.hs-activity-actions button {
	color: var(--hs-muted);
	width: 30px;
	height: 30px;
}

.hs-activity-actions button:hover {
	color: var(--hs-teal-dark);
}

.hs-activity-actions .is-delete:hover {
	color: var(--hs-danger);
}

.hs-more-wrap {
	margin: 14px 0 0;
	text-align: center;
}

.hs-table-wrap {
	overflow-x: auto;
}

.hs-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .88rem;
}

.hs-table th,
.hs-table td {
	padding: 8px 10px;
	border-bottom: 1px solid var(--hs-line);
	text-align: left;
	white-space: nowrap;
}

.hs-table th {
	font-size: .76rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--hs-muted);
}

.hs-table .num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.hs-table td:last-child {
	text-align: right;
}

.hs-table tbody tr:hover {
	background: var(--hs-bg);
}

.hs-height {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .86rem;
}

.hs-height label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--hs-muted);
	font-weight: 600;
}

.hs-height input {
	width: 90px;
	padding: 6px 8px;
}

.hs-export-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 0;
}

.hs-manual {
	margin: 0 0 16px;
	padding: 16px;
	background: var(--hs-surface);
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-radius);
	box-shadow: var(--hs-shadow);
}

.hs-manual > summary {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--hs-heading-font);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.hs-manual > summary::-webkit-details-marker {
	display: none;
}

.hs-manual[open] > summary {
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--hs-line);
}

.hs-manual > summary .hs-icon {
	color: var(--hs-teal);
}

/* --------------------------------------------------------------------------
   Menüplan
   -------------------------------------------------------------------------- */

.hs-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.hs-chip {
	position: relative;
	cursor: pointer;
}

.hs-chip input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.hs-chip span {
	display: inline-block;
	padding: 5px 12px;
	border: 1px solid var(--hs-line);
	border-radius: 999px;
	background: var(--hs-surface);
	font-size: .84rem;
	font-weight: 600;
	color: var(--hs-dark);
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.hs-chip input:checked + span {
	background: var(--hs-teal);
	border-color: var(--hs-teal);
	color: #fff;
}

.hs-chip input:focus-visible + span {
	outline: 3px solid var(--hs-teal-light);
	outline-offset: 2px;
}

.hs-plan-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
	margin-bottom: 16px;
}

.hs-plan-day {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	background: var(--hs-surface);
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-radius);
	box-shadow: var(--hs-shadow);
}

.hs-plan-day.is-today {
	border-color: var(--hs-teal);
	box-shadow: 0 0 0 2px rgba(3, 174, 173, .25);
}

.hs-plan-day-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px;
	font-family: var(--hs-heading-font);
	font-weight: 600;
}

.hs-plan-day-head small {
	font-family: var(--hs-body-font);
	font-weight: 400;
	color: var(--hs-muted);
	font-size: .8rem;
}

.hs-meal {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px;
	background: var(--hs-bg);
	border-radius: var(--hs-radius);
	border-left: 3px solid var(--hs-teal);
}

.hs-meal.is-lunch {
	border-left-color: var(--hs-warn);
}

.hs-meal.is-breakfast {
	border-left-color: var(--hs-teal-light);
}

.hs-meal.is-locked {
	background: rgba(3, 174, 173, .08);
}

.hs-meal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	font-size: .72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--hs-muted);
}

.hs-meal-title {
	font-family: var(--hs-heading-font);
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.3;
}

.hs-meal-title .hs-icon {
	color: var(--hs-warn-dark);
	vertical-align: -3px;
}

.hs-meal-meta {
	font-size: .78rem;
	color: var(--hs-muted);
}

.hs-meal-actions {
	display: flex;
	gap: 2px;
	margin-top: 2px;
}

.hs-meal-actions button {
	width: 30px;
	height: 30px;
	color: var(--hs-muted);
}

.hs-meal-actions button:hover {
	color: var(--hs-teal-dark);
}

.hs-meal-actions button.is-active {
	color: var(--hs-teal-dark);
}

.hs-plan-empty {
	grid-column: 1 / -1;
}

.hs-shopping-tools {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.hs-shopping-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

.hs-shopping h5 {
	margin: 0 0 6px;
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--hs-muted);
}

.hs-shopping ul {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.hs-shopping li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	font-size: .9rem;
}

.hs-shopping li input {
	accent-color: var(--hs-teal);
	width: 18px;
	height: 18px;
	margin: 0;
}

.hs-shopping li.is-done span {
	text-decoration: line-through;
	color: var(--hs-muted);
}

.hs-shopping-recipe {
	font-size: .8rem;
	color: var(--hs-muted);
	margin: 0 0 4px;
}

.hs-recipes {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 8px;
}

.hs-recipe {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px;
	padding: 10px 12px;
	background: var(--hs-bg);
	border-radius: var(--hs-radius);
}

.hs-recipe.is-inactive {
	opacity: .55;
}

.hs-recipe-title {
	font-family: var(--hs-heading-font);
	font-weight: 600;
	font-size: .92rem;
}

.hs-recipe-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 4px;
}

.hs-recipe-meta .hs-badge {
	font-size: .68rem;
}

.hs-recipe-actions {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hs-recipe-actions button {
	width: 30px;
	height: 30px;
	color: var(--hs-muted);
}

.hs-recipe-actions button:hover {
	color: var(--hs-teal-dark);
}

/* --------------------------------------------------------------------------
   Leerzustand, Dialoge, Toast
   -------------------------------------------------------------------------- */

.hs-empty {
	padding: 40px 24px;
	text-align: center;
	color: var(--hs-muted);
}

.hs-empty .hs-icon {
	color: var(--hs-teal);
	margin-bottom: 12px;
}

.hs-empty h3 {
	margin: 0 0 8px;
	color: var(--hs-dark);
}

.hs-empty-small {
	padding: 16px 8px;
	font-size: .88rem;
}

.hs-login-gate .hs-empty {
	padding: 56px 24px;
}

.hs-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.hs-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(32, 32, 32, .55);
}

.hs-modal-box {
	position: relative;
	width: 100%;
	max-width: 760px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	background: var(--hs-surface);
	border-radius: 12px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
	overflow: hidden;
}

.hs-modal-narrow {
	max-width: 460px;
}

.hs-modal-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: var(--hs-teal);
	color: #fff;
}

.hs-modal-head h3 {
	margin: 0;
	flex: 1;
	font-size: 1.05rem;
	color: #fff;
}

.hs-modal-body {
	padding: 18px;
	overflow-y: auto;
}

.hs-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 100001;
	max-width: min(92vw, 460px);
	padding: 12px 20px;
	border-radius: 999px;
	background: var(--hs-darker);
	color: #fff;
	font-size: .9rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

.hs-toast.is-error {
	background: var(--hs-danger);
}

/* --------------------------------------------------------------------------
   Eigenständige Seite (ohne Theme)
   -------------------------------------------------------------------------- */

.hs-shell-html {
	height: 100%;
	-webkit-text-size-adjust: 100%;
}

body.hs-shell {
	margin: 0;
	min-height: 100%;
	background: #f3f3f3;
	color: #404040;
	font-family: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
}

body.hs-shell * {
	box-sizing: border-box;
}

.hs-shell-head {
	background: linear-gradient(130deg, #03aead 0%, #007777 80%, #007777 100%);
	color: #fff;
	padding-top: env(safe-area-inset-top, 0px);
}

.hs-shell-head-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	max-width: 1140px;
	margin: 0 auto;
	padding: 10px 20px;
}

.hs-shell-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	text-decoration: none;
	font-family: Raleway, "Segoe UI", system-ui, -apple-system, sans-serif;
	font-weight: 600;
	font-size: 1.1rem;
}

.hs-shell-brand .hs-logo-small {
	width: 32px;
	height: 32px;
	border-radius: 8px;
}

.hs-shell-view {
	display: none;
	font-weight: 400;
	opacity: .9;
}

.hs-shell-view::before {
	content: "· ";
}

.hs-shell-nav {
	display: flex;
	align-items: center;
	gap: 6px;
}

.hs-shell-nav .hs-icon-btn {
	color: #fff;
	text-decoration: none;
}

.hs-shell-nav .hs-icon-btn:hover {
	background: rgba(255, 255, 255, .18);
}

.hs-shell-nav .hs-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border: 1px solid #fff;
	border-radius: 8px;
	background: #fff;
	color: #007777;
	font: inherit;
	font-weight: 600;
	text-decoration: none;
}

.hs-shell-user {
	font-size: .9rem;
	opacity: .95;
	margin-right: 4px;
}

.hs-shell-main {
	max-width: 1140px;
	margin: 0 auto;
	padding: 16px 20px 40px;
}

.hs-shell-site .hs-shell-main {
	max-width: none;
	padding: 0;
}

.hs-shell-app .healthysicola-app {
	box-shadow: 0 1px 3px rgba(0, 0, 0, .09);
}

/* In der eigenständigen Seite übernimmt der Kopf die Titelzeile. */
.hs-shell .hs-mobile-head {
	display: none !important;
}

/* Anmeldung */

.hs-login {
	max-width: 420px;
	margin: 0 auto;
	padding: 40px 24px 48px;
	text-align: center;
}

.hs-login h3 {
	margin: 0 0 6px;
	font-size: 1.5rem;
}

.hs-login-intro {
	color: var(--hs-muted);
	margin: 0 0 20px;
}

.hs-login-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
	background: var(--hs-surface);
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-radius);
	box-shadow: var(--hs-shadow);
	text-align: left;
}

.hs-login-form .hs-field input {
	font-size: 1rem;
	padding: 11px 12px;
}

.hs-btn-block {
	width: 100%;
	padding: 12px 18px;
	font-size: 1.02rem;
}

.hs-login-error {
	margin: 0 0 14px;
	padding: 10px 14px;
	border-radius: var(--hs-radius);
	background: rgba(235, 47, 94, .12);
	color: #a01338;
	font-weight: 600;
}

.hs-login-note {
	margin: 0 0 14px;
	padding: 10px 14px;
	border-radius: var(--hs-radius);
	background: rgba(3, 174, 173, .12);
	color: var(--hs-teal-dark);
	font-weight: 600;
}

.hs-login-links {
	margin: 16px 0 0;
	font-size: .9rem;
	color: var(--hs-muted);
}

.hs-login-links a {
	color: var(--hs-teal-dark);
}

/* --------------------------------------------------------------------------
   Website: Startseite
   -------------------------------------------------------------------------- */

.healthysicola-site {
	background: var(--hs-bg);
}

.hs-container {
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
}

.hs-slide-notice {
	background: var(--hs-dark);
	color: #f3f3f3;
	padding: 26px 0;
	text-align: center;
}

.hs-slide-notice p {
	margin: 0;
	font-size: 1.1rem;
}

.hs-slide-intro {
	background: var(--hs-gradient);
	color: #f3f3f3;
	padding: 64px 0;
}

.hs-intro-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 40px;
	align-items: center;
}

.hs-intro-text h1 {
	margin: 0;
	font-size: clamp(2.6rem, 6vw, 4.4rem);
	font-weight: 600;
	line-height: 1.05;
	color: #f3f3f3;
}

.hs-intro-text h2 {
	margin: 4px 0 22px;
	font-size: clamp(1.6rem, 4vw, 3rem);
	font-weight: 300;
	color: #f3f3f3;
}

.hs-intro-text p {
	font-size: clamp(1.05rem, 1.6vw, 1.35rem);
	max-width: 34em;
}

.hs-intro-actions {
	margin-top: 30px;
}

/* Gezeichnete Vorschau statt Screenshot */

.hs-mock {
	max-width: 380px;
	margin: 0 auto;
	padding: 16px;
	background: var(--hs-surface);
	border-radius: 16px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
	color: var(--hs-dark);
}

.hs-mock-head {
	display: flex;
	gap: 6px;
	margin-bottom: 14px;
}

.hs-mock-head span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--hs-line);
}

.hs-mock-head span:first-child {
	background: var(--hs-teal);
}

.hs-mock-row {
	display: grid;
	grid-template-columns: 22px 1fr 80px auto;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--hs-line);
	font-size: .9rem;
}

.hs-mock-row em {
	font-style: normal;
	font-weight: 600;
	font-family: var(--hs-heading-font);
}

.hs-mock-row i {
	display: block;
	height: 8px;
	border-radius: 999px;
	background: var(--hs-teal);
	justify-self: start;
	min-width: 0;
	max-width: 100%;
	width: 100%;
}

.hs-mock-row i[style*="width:50%"] {
	background: var(--hs-warn);
}

.hs-mock-row b {
	font-variant-numeric: tabular-nums;
	color: var(--hs-muted);
	font-weight: 600;
}

.hs-mock-ok,
.hs-mock-open {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(3, 174, 173, .15);
	color: var(--hs-teal-dark);
}

.hs-mock-open {
	background: rgba(254, 189, 105, .3);
	color: var(--hs-warn-dark);
}

.hs-mock-streak {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 12px;
	border-radius: var(--hs-radius);
	background: var(--hs-gradient);
	color: #fff;
	font-size: .95rem;
}

.hs-mock-streak strong {
	font-family: var(--hs-heading-font);
	font-size: 1.4rem;
}

.hs-slide-features {
	background: var(--hs-bg);
	padding: 20px 0;
}

.hs-feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.hs-feature {
	max-width: 300px;
	margin: 0 auto;
	padding: 56px 20px;
	text-align: center;
	border-top: 1px solid var(--hs-teal-dark);
	margin-top: -1px;
}

.hs-feature .hs-icon {
	color: var(--hs-teal-light);
	margin-bottom: 10px;
}

.hs-feature h5 {
	margin: 10px 0;
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.hs-feature p {
	font-size: .94rem;
	margin: 0;
}

.hs-slide-thoughts {
	background: var(--hs-dark);
	padding: 60px 20px;
}

.hs-thoughts {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: center;
	max-width: 1050px;
	margin: 0 auto;
}

.hs-thought {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	margin: 30px 4vw;
	background: var(--hs-line);
	border-radius: 30px;
	color: var(--hs-darker);
}

.hs-thought::before,
.hs-thought::after {
	content: "";
	position: absolute;
	z-index: -1;
	display: block;
	background: var(--hs-line);
	border-radius: 50%;
}

.hs-thought::before {
	width: 44px;
	height: 44px;
	top: -12px;
	left: 28px;
	box-shadow: -50px 30px 0 -12px var(--hs-line);
}

.hs-thought::after {
	width: 30px;
	height: 30px;
	right: 26px;
	bottom: -10px;
	box-shadow: 40px -34px 0 0 var(--hs-line),
		-28px -6px 0 -2px var(--hs-line),
		-24px 17px 0 -6px var(--hs-line),
		-5px 25px 0 -10px var(--hs-line);
}

.hs-thought-1 { width: 220px; min-height: 90px; }
.hs-thought-2 { width: 400px; min-height: 60px; }
.hs-thought-3 { width: 380px; min-height: 60px; }
.hs-thought-4 { width: 220px; min-height: 120px; }
.hs-thought-5 { width: 300px; min-height: 70px; }

.hs-slide-usage {
	background: var(--hs-gradient);
	color: #f3f3f3;
	padding: 60px 0;
}

.hs-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 30px;
	text-align: center;
}

.hs-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 12px;
	border: 2px solid #f3f3f3;
	border-radius: 50%;
	font-family: var(--hs-heading-font);
	font-size: 1.3rem;
	font-weight: 700;
}

.hs-step h5 {
	margin: 0 0 6px;
	font-size: 1.05rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #f3f3f3;
}

.hs-step-short {
	margin: 0 0 8px;
	font-weight: 600;
}

.hs-step-long {
	margin: 0;
	font-size: .94rem;
	opacity: .9;
}

/* --------------------------------------------------------------------------
   Kleine Bildschirme
   -------------------------------------------------------------------------- */

@media (max-width: 782px) {
	.hs-intro-grid {
		grid-template-columns: 1fr;
	}

	.hs-intro-card {
		order: -1;
	}

	/* Reiter als feste Leiste unten – wie in einer App. */
	.healthysicola-app {
		border-radius: 0;
	}

	html.hs-app-page body {
		padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
	}

	.hs-mobile-head {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 12px 14px;
		background: var(--hs-gradient);
		color: #fff;
		font-family: var(--hs-heading-font);
		font-weight: 600;
		font-size: 1.05rem;
	}

	.hs-mobile-user {
		margin-inline-start: auto;
		font-family: var(--hs-body-font);
		font-weight: 400;
		font-size: .85rem;
		opacity: .9;
	}

	.hs-tabs {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99990;
		gap: 0;
		padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
		border-bottom: 0;
		border-top: 1px solid var(--hs-teal-dark);
		box-shadow: 0 -4px 16px rgba(0, 0, 0, .18);
		justify-content: space-around;
	}

	.hs-tab {
		flex: 1;
		flex-direction: column;
		justify-content: center;
		gap: 2px;
		padding: 6px 2px;
		border-bottom: 0;
		border-radius: 8px;
		font-size: .66rem;
		letter-spacing: .01em;
		min-height: 52px;
	}

	.hs-tab span {
		display: inline;
	}

	.hs-tab .hs-icon {
		width: 22px;
		height: 22px;
	}

	.hs-tab.is-active {
		background: rgba(255, 255, 255, .18);
	}

	.hs-toast {
		bottom: calc(84px + env(safe-area-inset-bottom, 0px));
	}

	.hs-shell-main {
		padding: 0 0 8px;
	}

	.hs-shell-head-inner {
		padding: 8px 12px;
		gap: 8px;
	}

	.hs-shell-brand {
		min-width: 0;
		gap: 8px;
	}

	.hs-shell-brand span {
		font-size: 1rem;
		white-space: nowrap;
	}

	.hs-shell-brand .hs-shell-view {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.hs-shell-nav {
		flex: none;
		gap: 2px;
	}

	.hs-shell-user {
		display: none;
	}

	.hs-shell-view {
		display: inline;
	}

	.hs-shell-app .healthysicola-app {
		box-shadow: none;
	}

	.hs-view {
		padding: 10px;
	}

	.hs-panel {
		padding: 12px;
	}

	.hs-panels,
	.hs-panels-2 {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.hs-tiles {
		gap: 8px;
	}

	.hs-tile {
		padding: 12px;
	}

	.hs-tile-value {
		font-size: 1.5rem;
	}

	.hs-tile-label {
		font-size: .7rem;
	}

	/* Tages- und Wochennavigation: Pfeile und Titel in einer Zeile, Rest darunter. */
	.hs-daynav-title,
	.hs-weeknav-title {
		flex: 1 1 180px;
		min-width: 0;
		text-align: center;
	}

	.hs-daynav-title strong,
	.hs-weeknav-title strong,
	.hs-daynav-title span,
	.hs-weeknav-title span {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.hs-daynav-pick {
		margin-inline-start: 0;
		flex: 1 1 200px;
		order: 10;
	}

	.hs-daynav-pick input {
		width: 100%;
	}

	.hs-daynav [data-day-today],
	.hs-weeknav [data-week-current],
	.hs-weeknav [data-plan-current] {
		order: 11;
		flex: 1 1 120px;
	}

	.hs-weeknav .hs-btn-primary {
		margin-inline-start: 0;
		width: 100%;
		order: 12;
	}

	.hs-daychip {
		padding: 6px 2px;
		gap: 2px;
	}

	.hs-daychip strong {
		font-size: .95rem;
	}

	.hs-daychip small {
		font-size: .62rem;
	}

	.hs-streak {
		grid-template-columns: auto 1fr;
		gap: 10px;
		padding: 12px;
	}

	.hs-streak-flame {
		width: 46px;
		height: 46px;
	}

	.hs-streak-count strong {
		font-size: 1.8rem;
	}

	.hs-streak-side {
		grid-column: 1 / -1;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		white-space: normal;
		gap: 6px 12px;
	}

	/* Schalter mit vielen Optionen: zwei je Zeile. */
	.hs-seg-wrap button {
		flex: 1 1 40%;
	}

	.hs-field-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.hs-field-grid-tight {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hs-rule {
		grid-template-columns: 30px 1fr;
		padding: 10px;
	}

	.hs-rule-side {
		grid-column: 2;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.hs-rule-desc {
		font-size: .78rem;
	}

	/* Grössere Tippflächen in Listen. */
	.hs-activity-actions button,
	.hs-recipe-actions button,
	.hs-meal-actions button,
	.hs-goal .hs-activity-actions button {
		width: 38px;
		height: 38px;
	}

	.hs-icon-btn {
		width: 40px;
		height: 40px;
	}

	.hs-btn {
		padding: 10px 16px;
	}

	.hs-btn-danger {
		margin-inline-start: 0;
	}

	.hs-panel-head .hs-height {
		width: 100%;
	}

	.hs-table {
		font-size: .8rem;
	}

	.hs-table th,
	.hs-table td {
		padding: 6px 8px;
	}

	/* Dialoge als Bottom-Sheet. */
	.hs-modal {
		padding: 0;
		align-items: flex-end;
	}

	.hs-modal-box,
	.hs-modal-narrow {
		max-width: none;
		max-height: 94vh;
		border-radius: 16px 16px 0 0;
	}

	.hs-modal-body {
		padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0px));
	}

	.hs-plan-grid {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.hs-habit-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.hs-habit {
		padding: 14px 8px 12px;
	}

	.hs-habit-ring {
		width: 88px;
		height: 88px;
	}

	.hs-recipes {
		grid-template-columns: 1fr;
	}

	.hs-shopping-cols {
		grid-template-columns: 1fr;
	}

	.hs-household {
		grid-template-columns: 1fr;
	}

	.hs-thought {
		width: auto !important;
		max-width: 100%;
		margin: 26px 8px;
	}

	.hs-stats-head .hs-btn {
		margin-inline-start: 0;
	}
}

@media (max-width: 420px) {
	.hs-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hs-tile-value {
		font-size: 1.35rem;
	}

	.hs-daynav-title strong,
	.hs-weeknav-title strong {
		font-size: 1.1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.healthysicola-app *,
	.healthysicola-site * {
		transition: none !important;
	}
}

/* --------------------------------------------------------------------------
   Verwaltung
   -------------------------------------------------------------------------- */

.hs-manage-head {
	margin-bottom: 16px;
}

.hs-manage-head h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
	font-family: var(--hs-heading-font);
	font-size: 1.35rem;
	color: var(--hs-dark);
}

.hs-manage-head .hs-panel-note {
	margin: 0;
}

.hs-people {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.hs-person {
	display: grid;
	grid-template-columns: 40px 1fr 24px;
	gap: 12px;
	align-items: center;
	padding: 10px 12px;
	background: var(--hs-bg);
	border-radius: var(--hs-radius);
	cursor: pointer;
	transition: background-color .15s ease;
}

.hs-person:hover,
.hs-person:focus-visible {
	background: rgba(3, 174, 173, .12);
	outline: none;
}

.hs-person.is-blocked {
	opacity: .7;
}

.hs-person-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--hs-gradient);
	color: #fff;
	font-family: var(--hs-heading-font);
	font-weight: 700;
	font-size: 1.1rem;
}

.hs-person-body {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.hs-person-name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.hs-person-meta {
	font-size: .85rem;
	color: var(--hs-muted);
	overflow-wrap: anywhere;
}

.hs-person-go {
	color: var(--hs-muted);
}

.hs-person-form {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--hs-line);
}

.hs-person-form h5,
.hs-update-block h5 {
	margin: 0 0 10px;
	font-family: var(--hs-heading-font);
	font-size: 1rem;
	color: var(--hs-dark);
}

.hs-password-row {
	display: flex;
	gap: 8px;
	align-items: center;
}

.hs-password-row input {
	flex: 1;
	min-width: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	letter-spacing: .03em;
}

.hs-check-list {
	display: grid;
	gap: 8px;
}

.hs-check-list .hs-check {
	align-items: flex-start;
}

.hs-settings-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 10px 18px;
}

.hs-setting {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 10px;
	background: var(--hs-bg);
	border-radius: var(--hs-radius);
	font-size: .92rem;
}

.hs-setting input {
	width: 76px;
	text-align: center;
	flex: none;
}

.hs-setting-check {
	grid-column: 1 / -1;
}

.hs-manage-url {
	margin: 0 0 8px;
	font-size: .9rem;
	overflow-wrap: anywhere;
}

.hs-manage-url a {
	color: var(--hs-teal-dark);
}

.hs-update-setup {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--hs-line);
}

.hs-update-block {
	min-width: 0;
}

.hs-update-block .hs-form-actions {
	margin-top: 8px;
}

.hs-update-kv {
	margin: 0 0 8px;
	display: grid;
	gap: 2px;
	font-size: .9rem;
}

.hs-update-kv code {
	display: block;
	padding: 6px 8px;
	background: var(--hs-bg);
	border-radius: 4px;
	font-size: .85em;
	overflow-wrap: anywhere;
	user-select: all;
}

/* Verwaltung: am Handy nicht in der Leiste unten, sondern als Zahnrad oben. */
.hs-mobile-manage {
	display: none;
}

@media (max-width: 782px) {
	.hs-tab-manage {
		display: none;
	}

	.hs-mobile-manage {
		display: inline-flex;
		color: #fff;
	}

	.hs-mobile-manage.is-active,
	.hs-shell-nav [data-shell-tab].is-active {
		background: rgba(255, 255, 255, .2);
	}

	.hs-person {
		grid-template-columns: 36px 1fr 20px;
		gap: 10px;
	}

	.hs-settings-grid {
		grid-template-columns: 1fr;
	}
}