/* =========================================================
   Widmark-Rechner v1.12.0 – Minimales Plugin-CSS

   Enfold liefert: Farben, Schriften, .button, .select,
   .text_input, .av_promobox, .avia-data-table,
   .avia-button, .avia-color-theme-color-subtle.

   Dieses File ergänzt:
   1. Screenreader-Utility
   2. Float-Kontext-Fix damit form_element_half-DIVs
      nebeneinander floaten (Enfolds <p>-Clear-Fix umgehen)
   3. Getränke-Spalten: wr-col-60 / wr-col-20
   4. X-Button + Custom-Felder
   5. Promobox-Farben (Hinweis + Alert) + halbierte Margins
   6. Semantische Bewertungsfarben + Ampel-Skala
   7. BAK-Wert Schriftgröße
   8. Responsive
   ========================================================= */

/* 1 ── Screenreader-only ─────────────────────────────────── */
.wr-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* 2 ── Float-Kontext für Nebeneinander-Felder ───────────────
   Problem: overflow:hidden auf fieldset schneidet den Button
   ab (Box-Shadow/Outline ragt heraus).
   Lösung: display:flow-root auf fieldset – erzeugt BFC ohne
   Clipping. Unterstützt von allen modernen Browsern.          */
.wr-form fieldset {
	display: flow-root;
}

/* form_element_half: Float-Spalten für unseren Kontext */
.wr-form .form_element_half {
	float: left;
	width: 50%;
	box-sizing: border-box;
}

.wr-form .form_element_half:nth-child(odd) {
	padding-right: 12px;
	clear: left;
}

.wr-form .form_element_half:nth-child(even) {
	padding-left: 4px;
}

/* Clearfix-Div nach jeder half-Zeilen-Gruppe */
.wr-clear {
	clear: both;
	height: 0;
}

/* form_fullwidth: gecleart und volle Breite */
.wr-form .form_fullwidth {
	clear: both;
	width: 100%;
	float: none;
}

/* Submit-Container: Abstand nach Slider/Toggle-Zeile.
   .wr-submit-wrap = direkte Klasse (alle Browser).         */
.wr-form .wr-submit-wrap {
	margin-top: 32px;
}

/* 3 ── Getränke-Spalten (60 / 20 / 20 %) ────────────────────
   Plugin-eigene Float-Klassen, da Enfold keine 60%-Klasse hat */
.wr-drinks-list {
	clear: both;
}

.wr-drink-row {
	overflow: hidden; /* BFC / Float-Clearfix */
	margin-bottom: 6px;
}

.wr-col-60,
.wr-col-20 {
	float: left;
	box-sizing: border-box;
}

.wr-col-60 {
	width: 60%;
	padding-right: 10px;
}

.wr-col-20 {
	width: 20%;
	padding-right: 8px;
}

.wr-col-20:last-child {
	padding-right: 0;
}

/* 4a ── X-Button ─────────────────────────────────────────── */
.wr-remove-col {
	display: flex;
	align-items: flex-end;
	padding-bottom: 1px;
}

.wr-remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 36px;
	padding: 0;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 2px;
	opacity: 0.3;
	cursor: pointer;
	font-size: 0.85em;
	color: inherit;
	transition: opacity 0.2s, color 0.2s, border-color 0.2s;
}

.wr-remove:hover {
	opacity: 1;
	color: #dc2626;
	border-color: #dc2626;
}

/* 4b ── Custom-Felder (ml + Vol%) ──────────────────────────  */
.wr-custom {
	display: flex;
	gap: 6px;
	margin-top: 6px;
}

.wr-custom .text_input {
	flex: 1;
	width: 50%;
}

/* Label über Getränkeliste */
.wr-section-label {
	margin-bottom: 4px;
}
.wr-section-label label {
	display: block;
	font-weight: 700;
	font-size: 0.9em;
}

/* „+ Weiteres Getränk" – wenig Abstand oben, mehr unten */
.wr-form .wr-add-drink {
	display: inline-block;
	margin-top:    4px;
	margin-bottom: 16px;
}

/* ── Gramm-Hinweistext unter Custom-Input ─────────────── */
.wr-gramm-hint {
	display: block;
	font-size: .78em;
	opacity: .6;
	margin-top: 3px;
}

/* ── Range-Slider: Trinkdauer ────────────────────────────
   Enfold liefert keinen Slider-Style → Plugin übernimmt
   vollständiges Styling analog zu .button / .select.      */
.wr-slider-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	/* Gleiche Mindesthöhe wie Enfolds .select (~36px) damit
	   beide Spalten optisch auf einer Linie liegen.          */
	min-height: 36px;
	padding: 4px 0;
}

.wr-dauer-slider {
	-webkit-appearance: none;
	appearance: none;
	flex: 1;
	height: 6px;
	border-radius: 3px;
	background: var(--bg-alt, #e2e8f0);
	outline: none;
	cursor: pointer;
	transition: background .2s;
}

/* Thumb – Webkit */
.wr-dauer-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: currentColor; /* Erbt Theme-Primärfarbe via Enfolds .button */
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0,0,0,.25);
	transition: transform .15s;
}

.wr-dauer-slider::-webkit-slider-thumb:hover {
	transform: scale(1.15);
}

/* Thumb – Firefox */
.wr-dauer-slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border: none;
	border-radius: 50%;
	background: currentColor;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

/* Fokus-Ring */
.wr-dauer-slider:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* Wert-Anzeige rechts vom Slider */
.wr-slider-value {
	min-width: 3.5em;
	text-align: right;
	font-weight: 700;
	font-size: .9em;
	white-space: nowrap;
	flex-shrink: 0;
}

/* ── Toggle-Gruppe: Magenzustand ─────────────────────────
   3 nebeneinander, volle Breite des form_element_half.    */
.wr-toggle-group {
	display: flex;
	gap: 4px;
	/* margin-top wie bei .wr-slider-wrap → optische Ausrichtung */
	margin-top: 4px;
}

.wr-toggle-btn {
	flex: 1;
	/* min-height + padding ergeben ~36px wie Enfolds .select */
	min-height: 36px;
	padding: 6px 4px;
	border: 1px solid currentColor;
	border-radius: 3px;
	background: transparent;
	color: inherit;
	opacity: .45;
	font-size: .85em;
	font-weight: 500;
	cursor: pointer;
	text-align: center;
	transition: opacity .15s, background .15s, color .15s;
	line-height: 1.2;
	box-sizing: border-box;
}

.wr-toggle-btn:hover {
	opacity: .75;
}

.wr-toggle-btn.wr-toggle-active {
	opacity: 1;
	/* Hintergrundfarbe via border-color-Inheritance nicht zuverlässig.
	   Daher: feste Graufarbe die auf allen Themes lesbar bleibt.
	   Text wird explizit weiß gesetzt – kein mix-blend-mode.         */
	background-color: #4a5568;
	border-color:     #4a5568;
	color: #ffffff;
	font-weight: 700;
}

/* 5 ── Promobox-Farben ───────────────────────────────────────
   !important nötig, da Enfolds dynamic-css.php die av_promobox-
   Farben ebenfalls mit hoher Spezifität setzt.               */

/* Hinweis-Box */
.wr-promobox-hinweis {
	background-color: #F5F6FC !important;
	border-color:     #9DADBF !important;
	color:            #4671A3 !important;
	/* Margins halbiert: Enfolds Standard av_promobox = 30px */
	margin-top:    15px !important;
	margin-bottom: 15px !important;
}

/* Alert-Box (Pflichtfeld-Validierungsfehler) */
.wr-promobox-alert {
	background-color: #FFF8F4 !important;
	border-color:     #CDA18F !important;
	color:            #AF2C20 !important;
	margin-top:    15px !important;
	margin-bottom: 15px !important;
}

.wr-promobox-alert .wr-error-list {
	margin: 6px 0 0 18px;
	padding: 0;
}
.wr-promobox-alert .wr-error-list li {
	margin-bottom: 3px;
}

/* Ergebnis-Promoboxen – halbierte Margins */
.wr-bak-box,
.wr-bewertung {
	margin-top:    15px !important;
	margin-bottom: 15px !important;
}

/* Eingabe-Fehlermarkierung */
.wr-invalid {
	outline: 2px solid #CDA18F !important;
	outline-offset: 2px;
}

/* 6 ── Bewertungsfarben + Ampel-Skala ───────────────────────  */
.wr-bewertung.grad-0 { background: #E0F1B5 !important; border-color: #8BAF5B !important; color: #4F5F39 !important; }
.wr-bewertung.grad-1 { background: #FFFDF3 !important; border-color: #E6BF4A !important; color: #C96D11 !important; }
.wr-bewertung.grad-2 { background: #FFFDF3 !important; border-color: #E6BF4A !important; color: #C96D11 !important; }
.wr-bewertung.grad-3 { background: #FFF8F4 !important; border-color: #CDA18F !important; color: #AF2C20 !important; }
.wr-bewertung.grad-4 { background: #FFF8F4 !important; border-color: #CDA18F !important; color: #AF2C20 !important; }

.wr-skala-wrap { margin-top: 10px; }

.wr-skala {
	height: 12px;
	background: linear-gradient(to right, #22c55e 0%, #facc15 40%, #f97316 65%, #ef4444 100%);
	border-radius: 6px;
	position: relative;
	overflow: hidden;
}

.wr-skala-fill {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.28);
	width: 0;
	transition: width .6s cubic-bezier(.4,0,.2,1);
	border-radius: 6px 0 0 6px;
}

.wr-skala-labels {
	display: flex;
	justify-content: space-between;
	font-size: .72em;
	opacity: .55;
	margin-top: 3px;
}

.wr-abbau-tbody td.nuechtern {
	color: #16a34a;
	font-weight: 600;
}

/* 7 ── BAK-Wert Schriftgröße ─────────────────────────────── */
.wr-bak-wert {
	font-size: 3.5em;
	font-weight: 800;
	line-height: 1;
}
.wr-bak-einheit {
	font-size: 1.6em;
	font-weight: 600;
}

/* Einblend-Animation */
[id$="-ergebnis"] { animation: wr-fadein .35s ease; }

@keyframes wr-fadein {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* 8 ── Responsive ───────────────────────────────────────────
   Mobile Layout der Getränke-Zeile:
   - wr-col-60 (Getränk-Select) → 100%, eigene Zeile
   - wr-col-20 (Anzahl) + wr-col-20 (X-Button) → bleiben
     nebeneinander, je 50% der verbleibenden Breite.
   Damit sieht die Zeile mobil so aus:
   [ — Getränk auswählen —              ]
   [ 1×              ] [ ✕              ]           */
@media only screen and (max-width: 600px) {
	.wr-form .form_element_half {
		float: none;
		width: 100%;
		padding-right: 0;
		padding-left: 0;
		/* Gleichmäßiger Abstand zwischen gestapelten Feldern auf Mobile.
		   Enfolds .form_element hat auf Desktop margin-bottom via Theme-CSS,
		   auf Mobile nach dem float:none-Reset fehlt dieser oft.            */
		margin-bottom: 14px;
	}

	/* Getränk-Select: volle Breite, eigene Zeile */
	.wr-col-60 {
		float: none;
		width: 100%;
		padding-right: 0;
		margin-bottom: 4px;
	}

	/* Anzahl + X-Button: bleiben nebeneinander (je 50%) */
	.wr-col-20 {
		float: left;
		width: 50%;
		margin-bottom: 0;
	}

	.wr-col-20:first-of-type {
		padding-right: 8px;
	}

	.wr-col-20:last-child {
		padding-right: 0;
	}

	.wr-remove-col {
		justify-content: flex-start;
	}

	.wr-remove {
		width: 100%;
	}

	.wr-bak-wert { font-size: 2.8em; }
}

/* ── PWA-Modal ──────────────────────────────────────────────
   Overlay + Dialog mit Enfold-Typografie und Theme-Farben.
   Nur auf Mobile sichtbar (JS prüft window.innerWidth).     */

.wr-pwa-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: flex-end; /* Sheet von unten auf Mobile */
	justify-content: center;
}

.wr-pwa-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.55);
	backdrop-filter: blur(2px);
	cursor: pointer;
}

.wr-pwa-dialog {
	outline: none;
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 16px 16px 0 0;
	padding: 28px 24px 32px;
	box-shadow: 0 -4px 24px rgba(0,0,0,.18);
	animation: wr-pwa-slidein .3s cubic-bezier(.4,0,.2,1);
}

@keyframes wr-pwa-slidein {
	from { transform: translateY(100%); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

/* Schließen-Button oben rechts */
.wr-pwa-close {
	position: absolute;
	top: 14px;
	right: 16px;
	background: transparent;
	border: none;
	font-size: 1.2em;
	color: #888;
	cursor: pointer;
	line-height: 1;
	padding: 4px 8px;
	border-radius: 50%;
	transition: color .15s, background .15s;
}

.wr-pwa-close:hover {
	color: #333;
	background: rgba(0,0,0,.06);
}

/* PWA-Logo: padding-right verhindert Überlappung mit ✕-Button */
.wr-pwa-logo {
	margin: 0 0 16px;
	padding-right: 36px;
}

.wr-pwa-logo svg {
	display: block;
	width: auto;
	height: 36px;
}

/* Text-Bereich */
.wr-pwa-body {
	margin-bottom: 20px;
}

.wr-pwa-body .avia_textblock h3 {
	margin: 0 0 8px;
	font-size: 1.2em;
}

.wr-pwa-body .avia_textblock p {
	margin: 0 0 10px;
	color: #555;
	font-size: .95em;
	line-height: 1.5;
}

.wr-pwa-body .avia_textblock ul {
	margin: 0;
	padding: 0 0 0 18px;
	font-size: .9em;
	color: #555;
}

.wr-pwa-body .avia_textblock ul li {
	margin-bottom: 4px;
}

/* Aktions-Buttons */
.wr-pwa-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wr-pwa-btn-primary {
	display: block;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
}

.wr-pwa-btn-secondary {
	display: block;
	width: 100%;
	background: transparent;
	border: none;
	padding: 10px 16px;
	color: #888;
	font-size: .9em;
	cursor: pointer;
	text-align: center;
	transition: color .15s;
}

.wr-pwa-btn-secondary:hover {
	color: #333;
}