/* LIINI Aufwärm-Rechner 1.5.0 (vier Schritte) – Farben wie im Ratgeber.
   Selektoren bewusst stark (html body … :not(#larx)), weil Theme, Elementor und der Ratgeber
   Absätze, Knöpfe und Formularfelder global gestalten. */
.lar {
	--lar-bg: #FAF8F5;
	--lar-karte: #FFFFFF;
	--lar-rand: #E7E0D4;
	--lar-text: #2B2620;
	--lar-neben: #6E6558;
	--lar-akzent: #B8A88F;
	--lar-dunkel: #2B2620;
	--lar-gelb: #7A5810;
	--lar-gelb-bg: #FBF3E0;
}
html body .lar:not(#larx) {
	background: var(--lar-bg);
	color: var(--lar-text);
	border-radius: 24px;
	padding: clamp(18px, 4vw, 32px);
	margin: 2em 0;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
}
html body .lar:not(#larx) * { box-sizing: border-box; }
html body .lar.lar p:not(#larx) { margin: 0; font-size: 1rem; line-height: 1.4; color: inherit; }
html body .lar.lar .lar__titel:not(#larx) {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lar-neben);
	margin: 0 0 6px;
}
html body .lar.lar .lar__intro:not(#larx) {
	font-size: clamp(1.15rem, 2.4vw, 1.4rem);
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 20px;
	text-wrap: balance;
	color: var(--lar-text);
}
html body .lar.lar .lar__select:focus-visible,
html body .lar.lar .lar__chip:focus-visible,
html body .lar.lar .lar__range:focus-visible,
html body .lar.lar .lar__basis summary:focus-visible {
	outline: 3px solid var(--lar-dunkel);
	outline-offset: 2px;
}
html body .lar.lar .lar__rangezeile:not(#larx) { display: flex; align-items: center; gap: 14px; }
html body .lar.lar input.lar__range:not(#larx) {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	accent-color: var(--lar-dunkel);
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}
html body .lar.lar .lar__out:not(#larx) { flex: 0 0 auto; min-width: 64px; text-align: right; font-weight: 700; font-size: 1.05rem; color: var(--lar-text); }
html body .lar.lar .lar__chips:not(#larx) { display: flex; flex-wrap: wrap; gap: 8px; }
html body .lar.lar button.lar__chip:not(#larx),
html body .lar.lar button.lar__chip:not(#larx):hover,
html body .lar.lar button.lar__chip:not(#larx):focus {
	display: inline-flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: center !important;
	gap: 2px !important;
	width: auto !important;
	min-width: 0 !important;
	min-height: 48px !important;
	height: auto !important;
	padding: 8px 14px !important;
	margin: 0 !important;
	border: 2px solid var(--lar-rand) !important;
	border-radius: 14px !important;
	background: var(--lar-karte) !important;
	background-image: none !important;
	color: var(--lar-text) !important;
	font: inherit !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-align: left !important;
	line-height: 1.2 !important;
	box-shadow: none !important;
	cursor: pointer;
}
html body .lar.lar button.lar__chip:not(#larx):hover { border-color: var(--lar-akzent) !important; }
html body .lar.lar button.lar__chip.is-aktiv:not(#larx),
html body .lar.lar button.lar__chip.is-aktiv:not(#larx):hover,
html body .lar.lar button.lar__chip.is-aktiv:not(#larx):focus {
	border-color: var(--lar-dunkel) !important;
	background: var(--lar-dunkel) !important;
	color: #FFFFFF !important;
}
html body .lar.lar .lar__chip-haupt:not(#larx) { display: block; font-weight: 700; font-size: 0.95rem; line-height: 1.2; }
html body .lar.lar .lar__chip-sub:not(#larx) { display: block; font-size: 0.78rem; line-height: 1.2; opacity: 0.8; font-weight: 400; }
html body .lar.lar .lar__hinweis:not(#larx),
html body .lar.lar .lar__vorschau:not(#larx) {
	font-size: 0.85rem;
	background: var(--lar-gelb-bg);
	color: var(--lar-gelb);
	border-radius: 10px;
	padding: 8px 12px;
}
html body .lar.lar .lar__hinweis[hidden]:not(#larx),
html body .lar.lar .lar__vorschau[hidden]:not(#larx) { display: none; }
html body .lar.lar .lar__basis:not(#larx) { font-size: 0.85rem; color: var(--lar-neben); margin: 0; }
html body .lar.lar .lar__basis summary:not(#larx) { cursor: pointer; font-weight: 700; color: var(--lar-text); font-size: 0.9rem; }
html body .lar.lar .lar__basis p:not(#larx) { margin-top: 8px; font-size: 0.85rem; line-height: 1.5; color: var(--lar-neben); }
html body .lar.lar .lar__basis p[hidden]:not(#larx) { display: none; }
html body .lar.lar .lar__status:not(#larx) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html body .lar.lar .lar__app:not(#larx) { min-height: 120px; }

html body .lar.lar .lar__info:not(#larx) { font-size: 0.9rem; line-height: 1.5; color: var(--lar-text); background: var(--lar-bg); border-radius: 12px; padding: 10px 14px; }
html body .lar.lar .lar__info[hidden]:not(#larx),
html body .lar.lar .lar__vgl[hidden]:not(#larx),
html body .lar.lar .lar__chips[hidden]:not(#larx),
html body .lar.lar .lar__rangezeile[hidden]:not(#larx) { display: none; }
html body .lar.lar a.lar__link:not(#larx) { color: var(--lar-text); font-weight: 700; text-decoration: underline; text-decoration-color: var(--lar-akzent); text-underline-offset: 3px; white-space: nowrap; }
html body .lar.lar a.lar__link[hidden]:not(#larx) { display: none; }

/* 1.2.0: Flaschen als Bildkarten (Fotos freigestellt auf Weiss) */
html body .lar.lar .lar__flaschen:not(#larx) { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
html body .lar.lar button.lar__fl:not(#larx),
html body .lar.lar button.lar__fl:not(#larx):hover,
html body .lar.lar button.lar__fl:not(#larx):focus {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 6px !important;
	width: 100% !important;
	min-width: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 8px 8px 10px !important;
	background: #FFFFFF !important;
	background-image: none !important;
	border: 2px solid var(--lar-rand) !important;
	border-radius: 14px !important;
	color: var(--lar-text) !important;
	font: inherit !important;
	text-align: left !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	line-height: 1.2 !important;
	box-shadow: none !important;
	cursor: pointer;
	position: relative;
}
html body .lar.lar button.lar__fl:not(#larx):hover { border-color: var(--lar-akzent) !important; }
html body .lar.lar button.lar__fl.is-aktiv:not(#larx),
html body .lar.lar button.lar__fl.is-aktiv:not(#larx):hover { border-color: var(--lar-dunkel) !important; box-shadow: 0 0 0 1px var(--lar-dunkel) !important; }
html body .lar.lar button.lar__fl.is-aktiv:not(#larx)::after { content: ""; position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--lar-dunkel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }
html body .lar.lar button.lar__fl:focus-visible { outline: 3px solid var(--lar-dunkel); outline-offset: 2px; }
html body .lar.lar .lar__fl-bild:not(#larx) { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: #FFFFFF; border-radius: 10px; overflow: hidden; }
html body .lar.lar .lar__fl-bild img:not(#larx) { width: 100%; height: 100%; max-width: 100%; object-fit: contain; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
html body .lar.lar .lar__fl-text:not(#larx) { display: grid; gap: 1px; min-width: 0; }
html body .lar.lar .lar__fl-marke:not(#larx) { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lar-neben); }
html body .lar.lar .lar__fl-name:not(#larx) { font-size: 0.86rem; font-weight: 700; color: var(--lar-text); overflow-wrap: anywhere; }
html body .lar.lar .lar__fl-sub:not(#larx) { font-size: 0.74rem; color: var(--lar-neben); }
@media (max-width: 420px) { html body .lar.lar .lar__flaschen:not(#larx) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } html body .lar.lar .lar__fl-name:not(#larx) { font-size: 0.8rem; } }
html body .lar.lar .lar__flaschen:not(#larx) { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
html body .lar.lar .lar__fl-bild:not(#larx) { aspect-ratio: auto; height: 84px; }
html body .lar.lar .lar__fl-name:not(#larx) { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 420px) { html body .lar.lar .lar__fl-bild:not(#larx) { height: 72px; } html body .lar.lar button.lar__fl:not(#larx) { padding: 6px 6px 8px !important; } html body .lar.lar .lar__fl-name:not(#larx) { font-size: 0.78rem; } html body .lar.lar .lar__fl-sub:not(#larx) { font-size: 0.7rem; } }
/* Handy: 3 Karten nebeneinander (muss nach der minmax-Regel stehen) */
@media (max-width: 420px) { html body .lar.lar .lar__flaschen:not(#larx) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } html body .lar.lar .lar__fl-name:not(#larx) { font-size: 0.74rem; } }
/* 1.3.1: echte Flaschenbilder, etwas grössere Bildfläche */
html body .lar.lar .lar__fl-bild:not(#larx) { height: 104px; }
@media (max-width: 420px) { html body .lar.lar .lar__fl-bild:not(#larx) { height: 88px; } }

/* 1.4.0: drei Schritte – Leiste, Fragen, Temperaturwahl, Ergebnisliste */
html body .lar.lar .lar__intro:not(#larx) { margin-bottom: 16px; }
html body .lar.lar .lar__wegnav:not(#larx) { margin: 0 0 18px; }
html body .lar.lar ol.lar__weg:not(#larx) { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
html body .lar.lar ol.lar__weg li:not(#larx) { margin: 0; padding: 0; min-width: 0; list-style: none; }
html body .lar.lar ol.lar__weg li:not(#larx)::before,
html body .lar.lar ol.lar__weg li:not(#larx)::marker { content: none; }
html body .lar.lar button.lar__weg-btn:not(#larx),
html body .lar.lar button.lar__weg-btn:not(#larx):hover,
html body .lar.lar button.lar__weg-btn:not(#larx):focus,
html body .lar.lar button.lar__weg-btn:not(#larx):disabled {
	display: flex !important; align-items: center !important; gap: 8px !important;
	width: 100% !important; min-width: 0 !important; min-height: 44px !important; height: auto !important;
	margin: 0 !important; padding: 4px 2px !important;
	background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important;
	color: var(--lar-neben) !important; font: inherit !important; text-align: left !important;
	text-transform: none !important; letter-spacing: 0 !important; line-height: 1.2 !important;
	cursor: default; opacity: 1 !important;
}
html body .lar.lar button.lar__weg-btn.is-erledigt:not(#larx) { cursor: pointer; color: var(--lar-text) !important; }
html body .lar.lar button.lar__weg-btn.is-aktiv:not(#larx) { color: var(--lar-text) !important; }
html body .lar.lar button.lar__weg-btn:focus-visible { outline: 3px solid var(--lar-dunkel); outline-offset: 2px; border-radius: 10px; }
html body .lar.lar .lar__weg-nr:not(#larx) {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 50%;
	border: 2px solid var(--lar-rand); background: var(--lar-karte); color: var(--lar-neben);
	font-size: 0.8rem; font-weight: 700;
}
html body .lar.lar .is-aktiv .lar__weg-nr:not(#larx) { background: var(--lar-dunkel); border-color: var(--lar-dunkel); color: #FFFFFF; }
html body .lar.lar .is-erledigt .lar__weg-nr:not(#larx) { background: var(--lar-akzent); border-color: var(--lar-akzent); color: #FFFFFF; }
html body .lar.lar .lar__weg-text:not(#larx) { display: grid; min-width: 0; }
html body .lar.lar .lar__weg-label:not(#larx) { font-size: 0.78rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .lar.lar .lar__weg-wert:not(#larx) { font-size: 0.78rem; color: var(--lar-neben); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .lar.lar .is-erledigt:hover .lar__weg-wert:not(#larx) { text-decoration: underline; text-decoration-color: var(--lar-akzent); text-underline-offset: 3px; }
html body .lar.lar .lar__fortschritt:not(#larx) { height: 3px; background: var(--lar-rand); border-radius: 3px; margin-top: 8px; overflow: hidden; }
html body .lar.lar .lar__fortschritt span:not(#larx) { display: block; height: 100%; background: var(--lar-dunkel); border-radius: 3px; transition: width 0.3s ease; }

html body .lar.lar .lar__schritt:not(#larx) { display: grid; gap: 14px; min-width: 0; }
html body .lar.lar .lar__schritt.is-neu:not(#larx) { animation: lar-ein 0.22s ease-out both; }
@keyframes lar-ein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
html body .lar.lar .lar__frage:not(#larx) { display: grid; gap: 2px; outline: none; }
html body .lar.lar .lar__frage-nr:not(#larx) { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lar-neben); }
html body .lar.lar .lar__frage-text:not(#larx) { font-size: clamp(1.1rem, 2.4vw, 1.3rem); font-weight: 700; line-height: 1.25; color: var(--lar-text); text-wrap: balance; }

html body .lar.lar .lar__stufen:not(#larx) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { html body .lar.lar .lar__stufen:not(#larx) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html body .lar.lar button.lar__stufe:not(#larx),
html body .lar.lar button.lar__stufe:not(#larx):hover,
html body .lar.lar button.lar__stufe:not(#larx):focus {
	display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 4px !important;
	width: 100% !important; min-width: 0 !important; min-height: 92px !important; height: auto !important;
	margin: 0 !important; padding: 14px 16px !important;
	background: var(--lar-karte) !important; background-image: none !important;
	border: 2px solid var(--lar-rand) !important; border-radius: 16px !important; box-shadow: none !important;
	color: var(--lar-text) !important; font: inherit !important; text-align: left !important;
	text-transform: none !important; letter-spacing: 0 !important; line-height: 1.15 !important; cursor: pointer;
}
html body .lar.lar button.lar__stufe:not(#larx):hover { border-color: var(--lar-akzent) !important; }
html body .lar.lar button.lar__stufe.is-aktiv:not(#larx),
html body .lar.lar button.lar__stufe.is-aktiv:not(#larx):hover { background: var(--lar-dunkel) !important; border-color: var(--lar-dunkel) !important; color: #FFFFFF !important; }
html body .lar.lar button.lar__stufe:focus-visible { outline: 3px solid var(--lar-dunkel); outline-offset: 2px; }
html body .lar.lar .lar__stufe-grad:not(#larx) { font-size: 1.6rem; font-weight: 800; }
html body .lar.lar .lar__stufe-fuer:not(#larx) { font-size: 0.85rem; opacity: 0.8; }

html body .lar.lar .lar__ergebnis:not(#larx) { background: var(--lar-karte); border: 2px solid var(--lar-rand); border-radius: 18px; padding: 18px 20px; display: grid; gap: 12px; min-width: 0; }
html body .lar.lar .lar__erg-kopf:not(#larx) { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: 0.9rem; }
html body .lar.lar .lar__erg-wahl:not(#larx) { font-weight: 700; }
html body .lar.lar .lar__erg-start:not(#larx) { color: var(--lar-neben); }
html body .lar.lar ul.lar__liste:not(#larx) { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
html body .lar.lar li.lar__zeile:not(#larx) { display: grid; grid-template-columns: 4.2em minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
html body .lar.lar li.lar__zeile:not(#larx)::before,
html body .lar.lar li.lar__zeile:not(#larx)::marker { content: none; }
html body .lar.lar .lar__zeile-ml:not(#larx) { font-weight: 700; font-size: 0.95rem; white-space: nowrap; }
html body .lar.lar .lar__zeile-spur:not(#larx) { display: block; height: 10px; background: var(--lar-bg); border-radius: 6px; overflow: hidden; }
html body .lar.lar .lar__zeile-balken:not(#larx) { display: block; height: 100%; background: var(--lar-akzent); border-radius: 6px; }
html body .lar.lar .lar__zeile-zeit:not(#larx) { font-weight: 800; font-size: 1rem; white-space: nowrap; text-align: right; }
@media (max-width: 420px) {
	html body .lar.lar li.lar__zeile:not(#larx) { grid-template-columns: 3.8em minmax(0, 1fr) auto; gap: 8px; }
	html body .lar.lar .lar__zeile-zeit:not(#larx) { font-size: 0.92rem; }
	html body .lar.lar .lar__ergebnis:not(#larx) { padding: 14px; }
}
html body .lar.lar .lar__klein[hidden]:not(#larx) { display: none; }

html body .lar.lar .lar__aktionen:not(#larx) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
html body .lar.lar button.lar__textknopf:not(#larx),
html body .lar.lar button.lar__textknopf:not(#larx):hover,
html body .lar.lar button.lar__textknopf:not(#larx):focus {
	display: inline-flex !important; align-items: center !important; width: auto !important; min-height: 44px !important; height: auto !important;
	margin: 0 !important; padding: 6px 2px !important; background: transparent !important; background-image: none !important;
	border: 0 !important; box-shadow: none !important; color: var(--lar-text) !important; font: inherit !important;
	font-weight: 700 !important; font-size: 0.9rem !important; text-transform: none !important; letter-spacing: 0 !important;
	text-decoration: underline !important; text-decoration-color: var(--lar-akzent) !important; text-underline-offset: 3px; cursor: pointer;
}
html body .lar.lar button.lar__textknopf--klein:not(#larx) { min-height: 0 !important; padding: 0 !important; font-size: 0.9rem !important; display: inline !important; }
html body .lar.lar button.lar__textknopf:focus-visible,
html body .lar.lar button.lar__knopf:focus-visible { outline: 3px solid var(--lar-dunkel); outline-offset: 2px; }
html body .lar.lar button.lar__knopf:not(#larx),
html body .lar.lar button.lar__knopf:not(#larx):hover,
html body .lar.lar button.lar__knopf:not(#larx):focus {
	display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important;
	min-height: 46px !important; height: auto !important; margin: 0 !important; padding: 10px 18px !important;
	background: var(--lar-dunkel) !important; background-image: none !important; border: 2px solid var(--lar-dunkel) !important;
	border-radius: 999px !important; box-shadow: none !important; color: #FFFFFF !important; font: inherit !important;
	font-weight: 700 !important; font-size: 0.95rem !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer;
}
html body .lar.lar .lar__rangezeile[hidden]:not(#larx) { display: none; }
@media (prefers-reduced-motion: reduce) {
	html body .lar.lar .lar__schritt.is-neu:not(#larx) { animation: none; }
	html body .lar.lar .lar__fortschritt span:not(#larx) { transition: none; }
}

html body .lar.lar .lar__klein:not(#larx) { font-size: 0.8rem; line-height: 1.4; color: var(--lar-neben); }
/* Handy: Schrittleiste mit Zahl über dem Wort, damit nichts abgeschnitten wird */
@media (max-width: 560px) {
	html body .lar.lar button.lar__weg-btn:not(#larx),
	html body .lar.lar button.lar__weg-btn:not(#larx):hover,
	html body .lar.lar button.lar__weg-btn:not(#larx):focus,
	html body .lar.lar button.lar__weg-btn:not(#larx):disabled { flex-direction: column !important; align-items: center !important; gap: 4px !important; text-align: center !important; }
	html body .lar.lar .lar__weg-text:not(#larx) { justify-items: center; max-width: 100%; }
	html body .lar.lar .lar__weg-label:not(#larx) { font-size: 0.74rem; }
	html body .lar.lar .lar__weg-wert:not(#larx) { font-size: 0.72rem; max-width: 100%; }
}
/* Balken in allen Zeilen gleich lang ausrichten (gemeinsame Spalten über alle Zeilen) */
@supports (grid-template-columns: subgrid) {
	html body .lar.lar ul.lar__liste:not(#larx) { grid-template-columns: 4.2em minmax(0, 1fr) max-content; column-gap: 12px; }
	html body .lar.lar li.lar__zeile:not(#larx) { grid-column: 1 / -1; grid-template-columns: subgrid; }
	@media (max-width: 420px) { html body .lar.lar ul.lar__liste:not(#larx) { grid-template-columns: 3.8em minmax(0, 1fr) max-content; column-gap: 8px; } }
}
/* Hinweis Pre-Nahrung: Angaben des Herstellers gelten */
html body .lar.lar .lar__notiz:not(#larx) { position: relative; padding-left: 26px; font-size: 0.85rem; line-height: 1.45; color: var(--lar-neben); }
html body .lar.lar .lar__notiz:not(#larx)::before { content: "i"; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--lar-akzent); color: var(--lar-neben); font-size: 0.72rem; font-weight: 700; font-style: normal; line-height: 15px; text-align: center; }
/* Rechtlicher Hinweis unter dem Ergebnis */
html body .lar.lar .lar__recht:not(#larx) { font-size: 0.78rem; line-height: 1.5; color: var(--lar-neben); }
html body .lar.lar .lar__recht a.lar__link:not(#larx) { font-weight: 400; color: var(--lar-neben); }
/* 1.5.0: vier Schritte; Ergebnis-Kopf mit «Von 20 °C auf 37 °C» */
html body .lar.lar ol.lar__weg:not(#larx) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html body .lar.lar .lar__erg-kopf:not(#larx) { display: grid; gap: 2px; }
html body .lar.lar .lar__erg-flasche:not(#larx) { font-size: 0.85rem; font-weight: 700; color: var(--lar-neben); }
html body .lar.lar .lar__erg-temp:not(#larx) { font-size: 1rem; color: var(--lar-neben); }
html body .lar.lar .lar__erg-temp strong:not(#larx) { font-size: 1.15rem; font-weight: 800; color: var(--lar-text); }
html body .lar.lar .lar__schritt > .lar__info:not(#larx) { background: var(--lar-karte); border: 1px solid var(--lar-rand); }
@media (max-width: 420px) { html body .lar.lar button.lar__stufe:not(#larx) { padding: 12px 12px !important; min-height: 84px !important; } html body .lar.lar .lar__stufe-grad:not(#larx) { font-size: 1.45rem; } html body .lar.lar .lar__stufe-fuer:not(#larx) { font-size: 0.8rem; hyphens: manual; } }
/* 1.5.1: «Aus dem Kühlschrank» als breite Kachel, Hinweis auf den Home statt Ergebnis */
html body .lar.lar button.lar__stufe--breit:not(#larx) { grid-column: 1 / -1; min-height: 64px !important; flex-direction: row !important; align-items: baseline !important; justify-content: flex-start !important; gap: 10px !important; }
html body .lar.lar .lar__stufe--breit .lar__stufe-grad:not(#larx) { font-size: 1.1rem; }
html body .lar.lar .lar__stopp:not(#larx) { background: var(--lar-karte); border: 2px solid var(--lar-dunkel); border-radius: 18px; padding: 18px 20px; display: grid; gap: 10px; }
html body .lar.lar .lar__stopp[hidden]:not(#larx) { display: none; }
html body .lar.lar .lar__stopp-titel:not(#larx) { font-size: 1.1rem; font-weight: 800; outline: none; }
html body .lar.lar .lar__stopp p:not(#larx) { font-size: 0.95rem; line-height: 1.5; }
html body .lar.lar .lar__stopp .lar__aktionen:not(#larx) { justify-content: flex-start; gap: 8px 18px; }
html body .lar.lar a.lar__knopf:not(#larx),
html body .lar.lar a.lar__knopf:not(#larx):hover,
html body .lar.lar a.lar__knopf:not(#larx):focus {
	display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 20px;
	background: var(--lar-dunkel); border: 2px solid var(--lar-dunkel); border-radius: 999px; color: #FFFFFF;
	font-weight: 700; font-size: 0.95rem; text-decoration: none; box-shadow: none;
}
html body .lar.lar a.lar__knopf:focus-visible { outline: 3px solid var(--lar-dunkel); outline-offset: 2px; }
@media (max-width: 420px) { html body .lar.lar .lar__stopp:not(#larx) { padding: 14px; } }
html body .lar.lar .lar__stopp button.lar__textknopf:not(#larx) { text-align: left !important; justify-content: flex-start !important; }
/* 1.5.2: Handy – Flaschen als Wisch-Slider (gewählt = antippen, dann weiter zu Schritt 2) */
html body .lar.lar .lar__slide-spur:not(#larx) { display: none; }
@media (max-width: 560px) {
	html body .lar.lar .lar__flaschen:not(#larx) {
		display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%;
		gap: 10px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 2px 4px; margin: 0 -2px; scroll-padding-left: 2px;
	}
	html body .lar.lar .lar__flaschen:not(#larx)::-webkit-scrollbar { display: none; }
	html body .lar.lar button.lar__fl:not(#larx) { scroll-snap-align: start; padding: 8px 8px 10px !important; }
	html body .lar.lar .lar__fl-bild:not(#larx) { height: 128px; }
	html body .lar.lar .lar__fl-name:not(#larx) { font-size: 0.86rem; }
	html body .lar.lar .lar__fl-sub:not(#larx) { font-size: 0.74rem; }
	html body .lar.lar .lar__slide-spur:not(#larx) { display: block; height: 3px; background: var(--lar-rand); border-radius: 3px; overflow: hidden; margin-top: -4px; }
	html body .lar.lar .lar__slide-spur[hidden]:not(#larx) { display: none; }
	html body .lar.lar .lar__slide-spur span:not(#larx) { display: block; height: 100%; background: var(--lar-akzent); border-radius: 3px; }
}
/* 1.5.3: Produktseite – Kopf wie «So funktioniert's» (zentriert), Rechner höchstens 860 px breit */
html body .lar-produkt:not(#larx) { margin: 48px auto 0; max-width: 100%; }
html body .lar-produkt .lar-kopf:not(#larx) { text-align: center; margin: 0 auto 20px; max-width: 760px; padding: 0 8px; }
html body .lar-produkt h2.lar-kopf__titel:not(#larx) { margin: 0 0 8px; padding: 0; font-size: 24px; font-weight: 700; line-height: 1.25; color: #2B2620; text-transform: none; letter-spacing: 0; text-wrap: balance; }
html body .lar-produkt p.lar-kopf__unter:not(#larx) { margin: 0; font-size: 15px; line-height: 1.5; color: #6E6558; text-wrap: balance; }
html body .lar-produkt .lar.lar--produkt:not(#larx) { box-sizing: border-box; max-width: 860px; margin: 0 auto; }
@media (max-width: 767px) { html body .lar-produkt h2.lar-kopf__titel:not(#larx) { font-size: 22px; } html body .lar-produkt:not(#larx) { margin-top: 36px; } }
/* 1.5.4: Produktseite – Rechner so breit wie der übrige Inhalt (Wunsch LIINI), weniger Abstand nach oben */
html body .lar-produkt:not(#larx) { margin-top: 24px; }
html body .lar-produkt .lar.lar--produkt:not(#larx) { max-width: none; width: 100%; }
@media (max-width: 767px) { html body .lar-produkt:not(#larx) { margin-top: 20px; } }
/* 1.5.6: kein Springen beim Darüberfahren – Sonderregeln gelten auch für :hover/:focus (sonst gewinnt die Grundregel) */
html body .lar.lar button.lar__stufe.lar__stufe--breit:not(#larx),
html body .lar.lar button.lar__stufe.lar__stufe--breit:not(#larx):hover,
html body .lar.lar button.lar__stufe.lar__stufe--breit:not(#larx):focus {
	grid-column: 1 / -1; min-height: 64px !important; flex-direction: row !important; align-items: baseline !important;
	justify-content: flex-start !important; gap: 10px !important; padding: 14px 16px !important;
}
@media (max-width: 420px) {
	html body .lar.lar button.lar__stufe:not(#larx),
	html body .lar.lar button.lar__stufe:not(#larx):hover,
	html body .lar.lar button.lar__stufe:not(#larx):focus { padding: 12px 12px !important; min-height: 84px !important; }
	html body .lar.lar button.lar__stufe.lar__stufe--breit:not(#larx),
	html body .lar.lar button.lar__stufe.lar__stufe--breit:not(#larx):hover,
	html body .lar.lar button.lar__stufe.lar__stufe--breit:not(#larx):focus { min-height: 60px !important; padding: 12px 12px !important; }
}
/* 1.5.7: Flaschenraster nach verfügbarer Breite – ab 700 px Bühnenbreite 6 pro Zeile (12 Flaschen = 2 Zeilen), darunter 4 */
html body .lar.lar .lar__buehne:not(#larx) { container-type: inline-size; }
@container (min-width: 700px) {
	html body .lar.lar .lar__flaschen:not(#larx) { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
}
@media (min-width: 561px) {
	@container (min-width: 440px) and (max-width: 699.98px) {
		html body .lar.lar .lar__flaschen:not(#larx) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	}
}