/* =========================================================================
   convert.css – Apollon ↔ Ianseo Konverter (convertIanseoApollon.php).
   Geladen NACH base.css.
   ========================================================================= */
fieldset:last-of-type {
	  display: grid;
	  justify-content: normal;
}

fieldset p {
	width: 100%;
	max-width: 33rem;
}

.convert {
    display: grid;
	grid-template-columns: repeat(1, 1fr);
}

label, input, select {
	width: 100%;
	max-width: 32rem;
}

button {
	width: 8rem;
}

.result {
	line-height: 1.5em;
	margin-top:1rem;
	padding:.85rem 1rem;
	border: thin solid var(--color-accent-light);
	border-radius: 0.5rem;
	background:var(--color-accent-bg);
}

.result a.download {
	display:inline-block;
	margin-top:.5rem;
	padding:.5rem 1rem;
	background:rgb(242, 204, 138); color:var(--color-text); text-decoration:none; font-weight:600;
	border: 0.2rem outset var(--color-primary-hover);
}

.warnings {
  margin-top: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 6px;
  border: 1px solid rgb(240, 217, 166);
  background: rgb(253, 246, 227);
  color: #b27200;
}

/* =========================================================================
   Responsive Anpassungen. Die Felder oben sind über width:100% + max-width
   bereits fluid. Auf sehr schmalen Screens den Aktions-Button und den
   Download-Link über die volle Breite – besser mit dem Daumen treffbar.
   ========================================================================= */
@media (max-width: 480px) {
	button {
		width: 100%;
	}

	.result a.download {
		display: block;
		text-align: center;
	}
}