/* =========================================================================
   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;
}

/* Eigene Regel, NICHT in die Sammelzeile darüber: dort bekämen auch input und
   select die 9px und stünden damit anders als auf allen übrigen Seiten
   (base.css gibt Feldern padding: 3px).

   Gebraucht wird das Padding, weil .convert ein Grid ohne gap ist: die Labels
   sind Grid-Items und ihr Innenabstand ist der einzige senkrechte Abstand
   zwischen den gestapelten Blöcken. Bis 2026 kam er aus dem globalen
   label-Selektor in base.css, der dafür jede Seite des Projekts traf. */
.convert label {
	padding: 9px 0;
}

/* -------------------------------------------------------------------------
   Disziplinwahl mit dem Verweis auf den Jahrgangsrechner daneben.

   Zwei Flex-Kinder statt zweier Rasterspalten: der Umbruch entsteht dann aus
   den Breiten selbst und braucht keine Media Query. Ist neben dem 32rem
   breiten Feld kein Platz mehr für die 20rem des Verweises, rutscht er unter
   das Feld — genau die Ansicht, die auf schmalen Geräten schon vorher
   herauskam. Ein Breakpoint hätte dieselbe Schwelle ein zweites Mal
   behauptet, in Pixeln statt in der Schriftgröße des Anwenders.
   ------------------------------------------------------------------------- */
.discipline-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 2rem;
}

/* flex-basis statt width: bei einem Flex-Kind bestimmt sie die Ausgangsbreite
   und schlägt die 100% aus der Sammelzeile oben. Schrumpfen darf das Feld,
   wachsen nicht — 32rem bleibt die gewohnte Obergrenze. */
.discipline-row label {
	flex: 0 1 32rem;
}

/* align-items: center setzt den Verweis auf die senkrechte Mitte des Labels,
   also neben das Auswahlfeld statt neben dessen Beschriftung. Das trägt aber
   nur, wenn der Absatz seinen Standardabstand abgibt. */
.discipline-row p {
	flex: 1 1 20rem;
	margin: 0;
}

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;
	}
}