/* =========================================================
   Abbau-Rechner v1.1.0 – Minimales Plugin-CSS

   Enfold liefert: Farben, Schriften, .button, .select,
   .text_input, .av_promobox, .avia-data-table,
   form_element_half, Labels, Abstände.

   Dieses File ergänzt (identische Struktur wie Widmark-Rechner):
   1. Screenreader-Utility
   2. Float-Kontext-Fix (display:flow-root)
   3. Submit-Container Margin
   4. datetime-local Input-Fix
   5. Promobox-Farben (Hinweis blau, Alert rot)
   6. Eingabe-Fehlermarkierung
   7. Status-Box Ampelfarben
   8. Tabellen-Statusspalte + Ergebnis-Labels
   9. Einblend-Animation
   10. Responsive
   ========================================================= */

/* 1 ── Screenreader-only ─────────────────────────────────── */
.ar-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 Button-
   Shadows/Outlines ab.
   Lösung: display:flow-root – erzeugt BFC ohne Clipping.
   Identisch mit Widmark-Rechner.                             */
.ar-form fieldset {
	display: flow-root;
}

.ar-form .form_element_half {
	float: left;
	width: 50%;
	box-sizing: border-box;
}

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

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

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

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

/* 3 ── Submit-Container: Abstand nach Zeitpunkt-Feld ────────
   .ar-submit-wrap = direkte Klasse (alle Browser).
   Identisch mit .wr-submit-wrap im Widmark-Rechner.          */
.ar-form .ar-submit-wrap {
	margin-top: 16px;
}

/* 4 ── datetime-local: Enfold-.select-Optik ─────────────────
   type="datetime-local" wird vollständig per CSS auf den Look
   von Enfolds .select gebracht:
   - appearance:none  → OS-nativen Rahmen/Look entfernen
   - Padding / Border / Border-Radius identisch mit .select
   - Schrift erbt Theme-Werte (font-family, font-size, color)
   - Breite 100% + box-sizing:border-box
   - Kalender-Icon bleibt browsernativ, wird aber mit
     padding-right ausreichend Platz gelassen
   - ::-webkit-datetime-edit-* Pseudo-Elemente für Webkit-
     Browser (Chrome, Safari, Edge) einzeln stylen            */
.ar-zeitpunkt {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	box-sizing: border-box;

	/* Enfold .select Werte (aus base.css / theme.css) */
	padding: 8px 40px 8px 12px; /* rechts Platz für Kalender-Icon */
	border: 1px solid #c8c8c8;
	border-radius: 2px;
	background-color: #fff;
	color: inherit;
	font-family: inherit;
	font-size: 1em;
	line-height: 1.5;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}

.ar-zeitpunkt:focus,
.ar-zeitpunkt:focus-visible {
	border-color: #aaa;
	box-shadow: 0 0 0 2px rgba(0,0,0,.08);
	outline: none;
}

/* Webkit: Datum/Zeit-Text-Segmente an Enfold-Schrift anpassen */
.ar-zeitpunkt::-webkit-datetime-edit {
	padding: 0;
	color: inherit;
}

.ar-zeitpunkt::-webkit-datetime-edit-fields-wrapper {
	padding: 0;
}

.ar-zeitpunkt::-webkit-datetime-edit-text {
	color: #888;
	padding: 0 1px;
}

.ar-zeitpunkt::-webkit-calendar-picker-indicator {
	opacity: .5;
	cursor: pointer;
	margin-right: 2px;
}

.ar-zeitpunkt::-webkit-calendar-picker-indicator:hover {
	opacity: 1;
}

/* Ungültiger Wert (leer) – Placeholder-Farbe abdunkeln */
.ar-zeitpunkt:invalid {
	color: #999;
}

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

/* Hinweis (blau) */
.ar-promobox-hinweis {
	background-color: #F5F6FC !important;
	border-color:     #9DADBF !important;
	color:            #4671A3 !important;
	margin-top:    15px !important;
	margin-bottom: 15px !important;
}

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

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

/* 6 ── Eingabe-Fehlermarkierung ─────────────────────────────
   Identisch mit .wr-invalid im Widmark-Rechner.              */
.ar-invalid {
	outline: 2px solid #CDA18F !important;
	outline-offset: 2px;
}

/* 7 ── Status-Box Ampelfarben ────────────────────────────────
   Grün  = voraussichtlich negativ  (wie grad-0 im Widmark)
   Gelb  = Grenzbereich             (wie grad-1/2)
   Rot   = voraussichtlich positiv  (wie grad-3/4)
   Margins halbiert analog zu .wr-bak-box / .wr-bewertung.    */
.ar-status-box {
	margin-top:    15px !important;
	margin-bottom: 15px !important;
}

.ar-status-box.status-negativ {
	background-color: #E0F1B5 !important;
	border-color:     #8BAF5B !important;
	color:            #4F5F39 !important;
}

.ar-status-box.status-grenz {
	background-color: #FFFDF3 !important;
	border-color:     #E6BF4A !important;
	color:            #C96D11 !important;
}

.ar-status-box.status-positiv {
	background-color: #FFF8F4 !important;
	border-color:     #CDA18F !important;
	color:            #AF2C20 !important;
}

/* Ergebnis-Promoboxen – halbierte Margins */
.ar-substanz-info,
.ar-mpu-info {
	margin-top:    15px !important;
	margin-bottom: 15px !important;
}

/* 8 ── Tabellen-Statusspalte + Ergebnis-Labels ──────────────
   Farbkodierung identisch mit Widmark-Bewertungsfarben.      */
.ar-tabelle-tbody td.status-negativ { color: #4F5F39; font-weight: 600; }
.ar-tabelle-tbody td.status-grenz   { color: #C96D11; font-weight: 600; }
.ar-tabelle-tbody td.status-positiv { color: #AF2C20; }

.ar-substanz-info .ar-res-substanz-label {
	font-size: 1.1em;
}

.ar-mpu-info .ar-res-mpu-info {
	font-size: .92em;
	line-height: 1.5;
}

/* 9 ── Einblend-Animation ────────────────────────────────────
   Identisch mit Widmark-Rechner (wr-fadein).                 */
[id$="-ergebnis"] {
	animation: ar-fadein .35s ease;
}

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

/* 10 ── Responsive ───────────────────────────────────────────  */
@media only screen and (max-width: 600px) {
	.ar-form .form_element_half {
		float: none;
		width: 100%;
		padding-right: 0;
		padding-left: 0;
	}
}