/* =========================================================================
   base.css – globales Basis-Stylesheet (auf JEDER Seite geladen)
   Enthält: Farb-Tokens (:root), Body, Off-Canvas-Menü, Header/Footer,
   generische Formular-Element-Defaults sowie globale Hinweise.
   Seitenspezifische Layouts liegen in den jeweiligen Delta-Stylesheets.
   ========================================================================= */

:root {
    --color-page-bg:       moccasin;                  /* Seitenhintergrund            */
    --color-text:          #000;                      /* Standard-Textfarbe           */
    --color-primary:       #4e648c;                   /* Kopfzeile, Menü-Icon, Akzente */
    --color-primary-soft:  #4e648c9c;                 /* halbtransparenter Rahmen     */
    --color-primary-hover: rgba(78, 100, 140, 0.61);  /* Button-Hover                 */
    --color-accent:        #bd8c35;                   /* Gold                          */
    --color-accent-bg:     #bd8c3569;                 /* Gold, flächig hinterlegt      */
    --color-accent-strong: #bd8c3599;                 /* Gold, Off-Canvas-Menü         */
    --color-accent-menu:   rgba(189, 140, 53, 0.8);   /* Submenü-Flächen               */
    --color-accent-light:  #f2cc8a;                   /* heller Rand / Feld-Hintergrund */
    --color-legend-bg:     #6d80a3;                   /* legend-Hintergrund            */
    --color-line:          #666;                      /* Submenü-Striche               */
    --color-line-blue:     #264788;                   /* gepunktete Trennlinien        */
    --color-success:       #393;                      /* grün (Prüfmodus)              */
    --color-error:         #F00;                      /* rot (Eingabe/Fehler)          */
    --color-error-bg:      #ffecec;                   /* rot, Statusbox-Fläche         */
    --color-success-bg:    #e7f3e7;                   /* grün, Statusbox-Fläche        */
    --color-link-hover:    #0066cc;                   /* Link-Hover                    */
    --field-accent:        #ffe4b5;                   /* accent-color für Formularfelder */
}

/* Globaler Box-Modell-Reset: padding/border zählen zur width. Grundlage für
   alle fluiden Breiten (width:100% + padding sprengt sonst den Container). */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	background-color: var(--color-page-bg);
	font-family: Archivo, Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.9rem;
	font-stretch: normal;
	color: var(--color-text);
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	background-image: none;
	accent-color: var(--field-accent);
}

/* --------------------------------------------------------
   ICON CONTAINER (3×3 Raster mit Punkt-Hover-Effekt)
   -------------------------------------------------------- */
.icon-container {
	position: relative;
	grid-column: 3; /* Platzierung in der letzten Spalte */
	z-index: 9997; /* Ganz oben */
	width: 55px;
	height: 55px;
	border-radius: 0.2rem;
	background: var(--color-primary);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	align-items: center;
	justify-items: center;
	cursor: pointer;
}

/* 2. Pseudo-Element, das den vertikalen Text "Menü" enthält */
/* Hier nutzen wir writing-mode, um den Text vertikal darzustellen */
.icon-container::after {
  content: "Menü";
  position: absolute;
  left: 50%;
  bottom: -18px;            /* Startposition außerhalb des Containers (anpassen!) */
  transform: translate(-50%, 100%); /* startet außerhalb (komplett unterhalb) */
  text-orientation: mixed;   /* Sorgt dafür, dass Buchstaben lesbar bleiben */
  opacity: 0;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  color: var(--color-text);
  font-size: 1.1rem;
  pointer-events: none;     /* verhindert, dass das Pseudo-Element den Hover blockiert */
}

/* 3. Beim Hover fährt der Text an das Icon-Raster heran */
.icon-container:hover::after {
  transform: translate(-50%, 0); /* Endposition: direkt am unteren Rand des Containers */
  opacity: 1;
}

.icon-container .point {
	width: 12px;
	height: 12px;
	background: var(--color-text);
	transition: all 0.3s ease-in-out;
}

 /*	1) HOVER-EFFEKT (nur Desktop, weil auf Mobile kein Hover):
       Mittlere (2,5,8) & rechte (3,6,9) Spalte → Striche	*/
.icon-container:hover .point:nth-child(2),
.icon-container:hover .point:nth-child(3),
.icon-container:hover .point:nth-child(5),
.icon-container:hover .point:nth-child(6),
.icon-container:hover .point:nth-child(8),
.icon-container:hover .point:nth-child(9) {
	width: 18px;
	height: 2px;
	border-radius: 0;
}

 /* 2) MENU-ACTIVE (wird per JS hinzugefügt/entfernt, sobald das Menü geöffnet/geschlossen ist)
       -> Bleibende Striche, solange das Menü offen ist (Desktop & Mobile).	*/
.icon-container.menu-active .point:nth-child(2),
.icon-container.menu-active .point:nth-child(3),
.icon-container.menu-active .point:nth-child(5),
.icon-container.menu-active .point:nth-child(6),
.icon-container.menu-active .point:nth-child(8),
.icon-container.menu-active .point:nth-child(9) {
  width: 18px;
  height: 2px;
  border-radius: 0;
}

/* --------------------------------------------------------
   OVERLAY (Weichzeichnen des Hintergrundes)
   -------------------------------------------------------- */
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9998; /* unter dem Menü (9998), aber über dem Seiteninhalt */
	display: none;
	background: rgba(0, 0, 0, 0.1); /* leicht abgedunkelt */
	/* Weichzeichnen aller Elemente HINTER dem Overlay */
	backdrop-filter: blur(4px);
	transition: opacity 0.4s ease-in-out;
	opacity: 0;
}

/* Sichtbares Overlay (beim Öffnen des Menüs) */
.overlay.overlay-visible {
	display: block;
	opacity: 1;
}

/* --------------------------------------------------------
   OFF-CANVAS MENÜ

   Bewusst auf #menu (header.php) gescopt und NICHT auf den blanken
   Elementselektor `nav`. Sonst erbt jedes weitere <nav> im Seiteninhalt
   das Off-Canvas-Verhalten (position: fixed, translateX(100%), opacity: 0)
   und steht unsichtbar neben dem Bildschirm.
   -------------------------------------------------------- */
#menu {
	position: fixed;
	top: 0;
	right: 0;
	width: 250px;
	height: 100vh;
	background: var(--color-accent-strong);
 	border-left: 1px solid var(--color-accent);
	box-sizing: border-box;
	overflow-y: auto;
	transform: translateX(100%);  /* Standard: aus dem Bild geschoben */
	transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
	z-index: 9999;               /* über Overlay (9998), über Icon (9997) */
	opacity: 0;                  /* Für ein leichtes Fade-In */
	font-family: "Crimson Pro", Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.05rem;
}

 /* Geöffnetes Menü */
#menu.menu-open {
      transform: translateX(0);
      opacity: 1;
}

/* MENÜ-INHALT */
#menu {
	padding: 20px;
}

#menu ul {
	list-style: none;
	padding: 0;
}

#menu ul ul {
	list-style: none;
	padding-left: 10px;
	line-height: 30px;
	margin-top: 15px;
}

/* Hauptmenüpunkte */
.menu__item {
	margin-bottom: 10px;
	padding: 10px;
	border-radius: 4px;
	transition: all 0.4s ease-in-out;
	transform: translateX(10px);
	opacity: 0;
	position: relative; /* Für den Pfeil (::after) */
/* 	min-height: 40px; z.B. einzeiliger Hauptmenüpunkt */
/*     line-height: 40px; optional für zentrierten Text */
}

/* Sichtbar, wenn das Menü geöffnet ist */
#menu.menu-open .menu__item {
	transform: translateX(0);
	opacity: 1;
}

/* Hover-Farbe */
.menu__item:hover {
	/* background-color: var(--color-page-bg); */
	cursor: pointer;
}

/* --------------------------------------------------------
   SUBMENÜS
   -------------------------------------------------------- */
.has-submenu {
	display: block;        /* Block oder inline-block, wie du magst */
	position: relative;    /* Bezugspunkt für den absolut positionierten Pfeil */
	margin-bottom: 0;
	
}

/* --- Horizontaler Strich (wird auch im Minus-Zustand angezeigt) --- */
.has-submenu::after {
  content: '';
  position: absolute;
  top: 17px;
  right: 10px;
  width: 12px;    /* Länge der Linie */
  height: 2px;    /* Dicke der Linie */
  background-color: var(--color-line);
  transform: translateY(-50%);
  transition: background-color 0.2s ease-in-out;
}

/* --- Vertikaler Strich (dreht sich bei Interaktion) --- */
.has-submenu::before {
  content: '';
  position: absolute;
  top: 17px;
  right: 15px;
  width: 2px;
  height: 12px;
  background-color: var(--color-line);
  transform: translateY(-50%);
  transform-origin: center;
  transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

/* --- Hover (Desktop) oder per JS/CSS-Klasse (z.B. plus-minus) --- */
@media (hover: hover) and (pointer: fine) {
  .has-submenu:hover::before,
  .has-submenu.plus-minus::before {
    transform: translateY(-50%) rotate(-90deg);
    background-color: var(--color-text);
  }
  .has-submenu:hover::after,
  .has-submenu.plus-minus::after {
    background-color: var(--color-text);
  }
}

/* --- Für Klick (Mobile/Allgemein) --- */
/* Mit JavaScript kannst du beim Öffnen der Subnavigation die Klasse "arrow-rotated" hinzufügen: */
.has-submenu.plus-minus::before {
  transform: translateY(-50%) rotate(-90deg);
  background-color: var(--color-text);
}
.has-submenu.plus-minus::after {
  background-color: var(--color-text);
}

/* Submenü (Block-Layout, Fade-/Slide-In) */
.menu__item--submenu {
	display: block;
	margin-left: 15px;        /* Eingezogen links */
	background-color: var(--color-accent-menu);
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(-5px);
	transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

/* Geöffnetes Submenü */
.submenu--open {
	max-height: 500px;
	opacity: 1;
	transform: translateY(0);
}

main {
	padding: 0.5rem 3rem;
	background-color: var(--color-accent-bg);
	border: thin solid var(--color-accent-light);
	border-radius: 0.5rem;
}

img {
	border-style: none;
	max-width: 100%;
	height: auto;
}

p {
	line-height:1.5em;
}

a,
a:link,
a:visited,
a:focus,
a:active {
	font-style: normal;
	text-decoration: none;
	color: var(--color-text);
	cursor: pointer;
}

a:hover {
	color: var(--color-link-hover);
}

/* -------------------------------------------------------------------------
   Verweis auf den Jahrgangsrechner (beide Konverterseiten).

   Steht in base.css und nicht in convert.css, weil die beiden Konverter
   unterschiedliche Delta-Stylesheets laden: convertIanseoApollon.php holt
   convert.css, convertMitcom.php registration.css + championship.css.

   Der Selektor traegt das `a` mit Absicht. Die Regeln darueber greifen auch
   ueber `a:link` — das ist Typ plus Pseudoklasse und damit spezifischer als
   eine blanke Klasse; `.class-lookup` allein bekaeme seine Farbe nie.

   Unterstrichen, weil der Link mitten im Fliesstext eines Formulars steht:
   die projektweite Vorgabe nimmt Links die Unterstreichung, und ohne sie
   waere hier nichts zu sehen, was nach Link aussieht.
   ------------------------------------------------------------------------- */
a.class-lookup,
a.class-lookup:link,
a.class-lookup:visited {
	color: var(--color-primary);
	text-decoration: none;
}

a.class-lookup:hover,
a.class-lookup:focus {
	color: var(--color-link-hover);
}

header {
	display: grid;
	grid-template-columns: 1.25fr 4.5fr 1.25fr; /* 3 Spalten: Logo, Text, MenüIcon */
	font-family: "Tilt Warp", Verdana, Arial, Helvetica, sans-serif;
	align-items: center;
	gap: 1rem;
	height: 9rem;
	background-color: var(--color-primary);
	border: none;
	border-radius: 0rem 0rem 0.5rem 0.5rem;
	margin-bottom: 0.5rem;
 }

hgroup {
	grid-column: 2; /* Platzierung in der mittleren Spalte */
	text-align: center;
	letter-spacing: 0.40rem;
}

header > img {
	grid-column: 1; /* Platzierung in der ersten Spalte */
	place-self: center end;
}

hgroup > h1 {
	font-size: 2.5rem;
	margin: 0.25rem 0rem 1rem;
} 

hgroup > p {
	font-size: 1.5rem;
	margin: 0;
}

footer {
	display: flex;
	column-gap: 2rem;
	justify-content: flex-end;
	align-items: center;
	height: 2rem;
	background-color: var(--color-primary);
	border: none;
	border-radius: 0.5rem;
	margin-top: 0.75rem;
	padding: 1rem;
 }
 
footer a[href^="https://"] {
	font-weight: 600;
}

input, select, textarea, button, [class^="textklasse"] {
	font-family: Archivo, Verdana, Arial, Helvetica, sans-serif;
	background-color: var(--color-accent-light);
	border: 0.2rem inset var(--color-primary-soft);
}

input, select, button, [class^="textklasse"] {
  font-stretch: extra-condensed;
  font-size: 0.95rem;
}

input[type="radio"]:checked,
input[type="checkbox"]:checked {
	background-color: var(--color-primary);
}

input[type="radio"]:not(:checked),
input[type="checkbox"]:not(:checked) {
	background-color: var(--color-accent-light);
}

input:focus, select:focus, textarea:focus, button:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
	border: 0.2rem solid  var(--color-primary);
}

form {
  display: grid;
  grid-template-columns: 1fr;
}

form > p {
	text-align: center;
	font-size: 1rem;
	font-weight: bold;
	margin-top: 0;
}
fieldset {
	display: block;
	margin-bottom: 0.5rem;
	padding: 0.5rem;
	border: thin solid var(--color-accent-light);
	border-radius: 0.5rem;
	width: 100%;
	background-color: var(--color-accent-bg);
}

fieldset:last-of-type {
  display: flex;
  justify-content: flex-end;
}

legend {
	font-size: 1.2rem;
	font-weight:bold;
	margin-left: 1.15rem;
	background-color: var(--color-legend-bg);
	text-align: left;
	border: none;
	border-radius: 0.25rem;
	padding: 5px 8px;
}

input, select, button {
	display: block;
	padding: 3px;
	width: 11rem;
	text-align: left;
}

button {
	text-align: center;
	margin: 0.2em 25px 0.3em 0;
	border: 0.2rem outset var(--color-primary-soft);
	width: 6.65rem;
}

button:hover {
	background:var(--color-primary-hover);
}

input[type="radio"],
input[type="checkbox"] {
	display: inline-block;
	appearance: none;
	width: 1.25rem;
	height: 1.25rem;
	margin-right: 0.5em;
	vertical-align:middle;
	border: 3px solid var(--color-primary-soft);
	border-radius: 50%;
}

input[type="checkbox"] {
	border-radius: 20%;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
	-moz-appearance: textfield;
	width: 3em;
	text-align: center;
	margin: 0 auto;
}

/* Nur noch, was auf JEDER Seite gilt.

   width: 7rem und padding: 9px 0 standen bis 2026 ebenfalls hier. base.css
   wird ueberall geladen — die Regel traf damit auch die Filterleisten von
   Quali-, Rekord- und Klassenrechner-Seite, die sie dort einzeln wieder
   zuruecknehmen mussten (.quali-filter label, .calc-filter label,
   .records-aside label — alle drei mit demselben Kommentar).

   Die Masse gehoeren zu den Meldeformularen und stehen jetzt in
   registration.css; newRecords.css und convert.css setzen ihr Padding selbst,
   weil ihre Spalten-Layouts ohne gap auskommen und es dort der einzige
   senkrechte Abstand war. */
label {
	font-style: normal;
	cursor: pointer;
}

textarea {
	margin-left:1.2rem;
	width: 100%;
	max-width: 30rem;
	height:9.5em;
	font-size: 0.9rem;
}
#jshinweis {
	top: 375px;
	z-index: 100;
	position: absolute;
	height: auto;
	max-width: 550px;
	width: 100%;
	background-color: var(--color-accent);
	border: thick solid var(--color-primary);
	padding: 0px 20px 15px;
	margin-left: 11rem;
}

pre {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	color: var(--color-text);
}

/* Oberer Abstand für Auswahlfelder – global, ergänzt die generischen Feld-Defaults. */
select {
	margin-top: 0.65rem;
}

/* .main-link: im Off-Canvas-Menü (DSB/WSB) global verwendet, daher hier statt in index.css. */
.main-link {
	max-width: 80%;
	text-align: center;
}

/* =========================================================================
   Warte-Anzeige beim Absenden (Markup erzeugt js/submitGuard.js).

   Sie liegt über der ganzen Seite und fängt damit jeden weiteren Klick ab,
   während gespeichert und versendet wird. Sichtbar wird sie ausschließlich
   über die Klasse .is-visible – die Content-Security-Policy (style-src 'self')
   verwirft inline gesetzte style-Attribute ersatzlos.
   ========================================================================= */
.submit-busy {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 10000;                    /* über Off-Canvas-Menü (9999) */
	padding: 1rem;
	background: rgba(0, 0, 0, 0.45);
	place-items: center;               /* wirkt zusammen mit display:grid */
}

.submit-busy.is-visible {
	display: grid;
}

.submit-busy__panel {
	width: 100%;
	max-width: 26rem;
	padding: 1.5rem;
	text-align: center;
	background-color: var(--color-page-bg);
	border: thick solid var(--color-primary);
	border-radius: 0.5rem;
}

.submit-busy__spinner {
	width: 2.75rem;
	height: 2.75rem;
	margin: 0 auto 1rem;
	border: 0.35rem solid var(--color-accent-light);
	border-top-color: var(--color-primary);
	border-radius: 50%;
	animation: submit-busy-spin 0.9s linear infinite;
}

@keyframes submit-busy-spin {
	to { transform: rotate(360deg); }
}

.submit-busy__text {
	margin: 0;
	font-weight: 600;
	line-height: 1.5em;
}

.submit-busy__hint {
	margin: 0.85rem 0 0;
	line-height: 1.5em;
}

.submit-busy__hint[hidden] {
	display: none;
}

/* Wer Bewegung im Betriebssystem abbestellt hat, bekommt den Kreis ruhend –
   der Text allein trägt die Information. */
@media (prefers-reduced-motion: reduce) {
	.submit-busy__spinner {
		animation: none;
	}
}

/* =========================================================================
   Feldmarkierung nach serverseitiger Prüfung

   Die Datenklassen und die Prüfblöcke der Formularseiten markieren ein
   beanstandetes Feld, indem sie die Klasse 'error' setzen (includes/
   formFields.php baut daraus class + aria-invalid). Diese Regel gibt der
   Markierung ihr Bild.

   GLOBAL und nicht in registration.css, weil die Markierung auf JEDER Seite
   mit serverseitiger Formularprüfung vorkommt — nicht nur auf denen mit
   Meldeformular. newRecords.php lädt registration.css nicht und markierte
   seine Felder deshalb bis 2026 folgenlos: die Klasse stand im Markup, die
   Regel dazu wurde auf dieser Seite nie geladen.
   ========================================================================= */
.error {
	border: 2px solid var(--color-error);
	border-radius: 5px;
	height: min-content;
}

/* =========================================================================
   Fehlerliste über dem Formular und Meldung unter dem Feld

   Beide entstehen in includes/formFields.php (errorSummary, fieldErrorNote),
   die Texte stehen in includes/constantsFormErrors.php. Sie stehen hier und
   nicht in registration.css, aus demselben Grund wie .error darüber: jede
   Seite mit serverseitiger Formularprüfung braucht sie, nicht nur die mit
   Meldeformular.
   ========================================================================= */
.form-errors {
	margin: 1rem 0;
	padding: 0.75rem 1rem;
	border: thin solid var(--color-error);
	border-left-width: 0.4rem;   /* Farbbalken links, wie .hinweis */
	border-radius: 0.5rem;
	background-color: var(--color-error-bg);
	line-height: 1.5em;
}

/* tabindex="-1" macht den Kasten fokussierbar, damit der Browser nach dem
   erneuten Aufbau dorthin springt. Der Fokusring gehört dann aber den
   Sprunglinks darin und nicht dem Kasten selbst — sonst umrandet der Browser
   den ganzen Block, was aussieht wie ein zweiter Fehler. */
.form-errors:focus {
	outline: none;
}

.form-errors-title {
	margin: 0 0 0.5rem 0;
	color: var(--color-error);
	font-weight: 700;
}

.form-errors ul {
	margin: 0;
	padding-left: 1.25rem;
}

.form-errors li + li {
	margin-top: 0.25rem;
}

/* Die Sprunglinks bleiben unterstrichen: sie sind der einzige Hinweis darauf,
   dass die Zeilen anklickbar sind. */
.form-errors a {
	color: inherit;
}

/* Meldung unter dem einzelnen Feld.

   display: block, weil das Element in der Schützenzeile Flex-Kind von .daten
   ist und sonst neben dem Feld landen würde statt darunter. Die Zeile darf
   umbrechen — „Bogenart, Geburtsjahr und Geschlecht ergeben zusammen keine
   Wertungsklasse“ passt in keine Spaltenbreite. */
.field-error {
	display: block;
	margin-top: 0.25rem;
	color: var(--color-error);
	font-size: 0.85em;
	line-height: 1.3;
}

/* =========================================================================
   Statusmeldungen nach dem Absenden

   Kurze Rückmeldungen: Mailversand fehlgeschlagen, Meldung angenommen,
   Eingaben unvollständig. Global hier statt in einem Delta-Stylesheet, weil
   dieselben Klassen auf Seiten mit unterschiedlichen Deltas vorkommen
   (thxArcheryCup/thxChampionship -> registration.css, newRecords -> newRecords.css).

   .mailerror, .hinweis  – Fehler/Warnung (rot)
   .bestaetigung         – Erfolg (grün)
   ========================================================================= */
.mailerror,
.hinweis,
.bestaetigung {
	margin: 1rem 0;
	padding: 0.75rem 1rem;
	border: thin solid;
	border-left-width: 0.4rem;   /* Farbbalken links – trägt die Signalwirkung */
	border-radius: 0.5rem;
	line-height: 1.5em;
}

.mailerror,
.hinweis {
	border-color: var(--color-error);
	background-color: var(--color-error-bg);
}

.bestaetigung {
	border-color: var(--color-success);
	background-color: var(--color-success-bg);
}

/* "Achtung:" zusätzlich einfärben. */
.mailerror strong,
.hinweis strong {
	color: var(--color-error);
}

/* Erster/letzter Absatz ohne Außenabstand, damit die Innenabstände der Box
   nicht doppelt wirken. */
.mailerror > :first-child,
.hinweis > :first-child,
.bestaetigung > :first-child {
	margin-top: 0;
}

.mailerror > :last-child,
.hinweis > :last-child,
.bestaetigung > :last-child {
	margin-bottom: 0;
}

/* =========================================================================
   Responsive Anpassungen (Desktop-first: greifen nur unterhalb der Breakpoints).
   Betrifft globale Komponenten – Kopfzeile, Randabstände, globale Hinweise.
   Seitenspezifische Layouts (Grids, Formularspalten) werden in den jeweiligen
   Stylesheets angepasst.
   ========================================================================= */
@media (max-width: 768px) {
	body {
		padding: 0 0.5rem;
	}

	/* Kopfzeile: feste 9rem-Höhe lösen, damit Titel umbrechen kann. */
	header {
		height: auto;
		gap: 0.5rem;
		padding: 0.75rem 0;
	}

	hgroup {
		letter-spacing: 0.2rem;
	}

	hgroup > h1 {
		font-size: 1.8rem;
		margin: 0.25rem 0 0.5rem;
	}

	hgroup > p {
		font-size: 1.1rem;
	}

	textarea {
		margin-left: 0;
	}

	#jshinweis {
		margin-left: 0;
		max-width: calc(100vw - 1rem);
	}
}

@media (max-width: 480px) {
	hgroup {
		letter-spacing: 0.1rem;
	}

	hgroup > h1 {
		font-size: 1.4rem;
	}

	hgroup > p {
		font-size: 0.95rem;
	}

	legend {
		font-size: 1.05rem;
	}
}