/* Maske zum Gruenden eines Referats (/:ca/gruenden).

   Die Formularteile - .formular, .feld-block, .feld, .btn - kommen aus
   admin.css und werden hier nicht wiederholt. Diese Datei bringt nur, was der
   oeffentlichen Seite eigen ist: der Rahmen um das Formular und die Zeilen der
   Beteiligten, die es in der Verwaltung so nicht gibt.

   Eingebunden wird sie VOR admin.css - warum, steht in gruenden.html. */

body.gruenden {
  background: var(--bage);
  font-size: 15px;
  line-height: 1.5;
}

/* Derselbe Seitenabstand wie Kalender, Katalog und Footer - das Formular
   steht damit auf der Fluchtlinie der uebrigen Seite. */
.gruenden-main {
  padding: 32px var(--seiten-rand) 56px;
  background: var(--bage);
  color: var(--tinte);
}

/* stylesheet.css setzt global "* { color: white }"; admin.css dreht das fuer
   seine eigene Klasse zurueck, und die Formularteile von dort brauchen
   dasselbe.

   Anders als dort gilt es hier nur fuer den Inhalt und nicht fuer die ganze
   Seite: Kopf und Fuss sind die der Campus-Seiten und schreiben weiss auf
   dunkel. Am body haengt aus demselben Grund auch kein Flex-Layout - die Hoehe
   des Logos im Kopf rechnet sich in Prozent und liefe darin auf seine
   Originalgroesse auf (siehe header.css). */
.gruenden-main * { color: inherit; }

/* ==========================
   Leiste unter dem Kopf
   ========================== */
/* An der Stelle, an der die Campus-Seite ihre Filterleiste hat. Dieselbe Form
   wie die Leiste des Archivs, aber mit eigenen Regeln: archive.css brachte
   sonst die Kartenformen des Archivs mit, von denen hier keine vorkommt. */
.gruenden-leiste {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.gruenden-leiste .gruenden-hinweis-kopf {
  max-width: 70ch;
  font-size: 15px;
  line-height: 1.55;
  color: #3e4a42;
}

/* ==========================
   Breite und Mitte
   ========================== */
/* Auf dem Desktop steht die Maske mittig. admin.css gibt .formular seine
   Breite (980px), aber keinen Rand - dort sitzt das Formular unter einer
   Navigation und gehoert nach links. Hier steht es allein auf der Seite und
   klebte sonst am linken Rand. Der Archiv-Block darueber nimmt dieselbe
   Breite, damit beide auf einer Fluchtlinie stehen. */
.gruenden-main .formular,
.archiv-block,
.gruenden-hinweis {
  max-width: 980px;
  margin-inline: auto;
}

/* ==========================
   Archiv ueber dem Formular
   ========================== */
/* Sieht aus wie ein Block des Formulars, ist aber keiner: er steht ausserhalb
   des <form>, damit weder das Suchfeld noch die Treffer beim Absenden
   mitgeschickt werden. */
.archiv-block {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--tinte);
}

.archiv-block h2 {
  font-size: 16px;
  color: var(--tanne);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--linie);
}

.archiv-block input[type='search'] {
  font-family: inherit;
  font-size: 15px;
  color: var(--tinte);
  background: #fff;
  border: 1px solid rgba(23, 32, 25, 0.22);
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
  min-width: 0;
}

.archiv-block input[type='search']:focus {
  outline: 2px solid var(--berg);
  outline-offset: 1px;
  border-color: var(--berg);
}

/* Ein langes Archiv soll das Formular nicht wegdruecken - ab etwa fuenf
   Zeilen wird gescrollt statt gewachsen. */
.archiv-treffer {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
}

.archiv-treffer__knopf {
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  background: var(--nebel);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.archiv-treffer__knopf:hover {
  background: #fff;
  border-color: var(--moos);
}

.archiv-treffer__titel {
  font-weight: 600;
  color: var(--tanne);
}

.archiv-treffer__text {
  font-size: 12.5px;
  color: #5c665f;
  /* Eine Zeile reicht - die ganze Beschreibung steht auf der Detailseite. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Das uebernommene Referat bleibt markiert: der Titel steht weit unten im
   Formular, hier oben soll ablesbar bleiben, worauf er zurueckgeht. */
.archiv-treffer__zeile--gewaehlt .archiv-treffer__knopf {
  background: #fff;
  border-color: var(--berg);
  box-shadow: inset 3px 0 0 var(--berg);
}

.archiv-leer {
  font-size: 13px;
  color: #5c665f;
  font-style: italic;
}

/* ==========================
   Meldung ueber dem Formular
   ========================== */
/* Nach einer abgelehnten Eingabe landet man wieder oben - hier steht, warum
   nichts heruntergeladen wurde. Die Einzelheiten stehen an den Feldern. */
.gruenden-hinweis {
  margin-bottom: 20px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
}

.gruenden-hinweis--fehler {
  background: #fdf1f1;
  border: 1px solid #b03d3d;
  color: #7a2a2a;
}

/* admin.css gibt seinen Feldern das Aussehen der Seite, zaehlt dafuer aber
   die Typen einzeln auf - text, number, select, textarea. Das E-Mail-Feld ist
   nicht darunter und stuende sonst im Aussehen des Browsers da: anderer
   Rahmen, andere Hoehe, und die Zeile der Beteiligten liefe auseinander.
   Die Anmeldung loest es fuer sich genauso (.anmeldung in admin.css), statt
   die geteilte Regel zu erweitern. */
.gruenden-main .feld input[type='email'] {
  font-family: inherit;
  font-size: 15px;
  color: var(--tinte);
  background: #fff;
  border: 1px solid rgba(23, 32, 25, 0.22);
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
  min-width: 0;
}

/* Der rote Rahmen an einem beanstandeten Feld.
 *
 * admin.css hat dafuer ".feld [aria-invalid='true']", das aber nie zum Zug
 * kommt: die Grundregel darueber zaehlt den Feldtyp mit (".feld
 * input[type='text']") und ist damit spezifischer. Hier wird der Rahmen
 * nachgezogen - fuer diese Seite, nicht fuer die Masken der Verwaltung, deren
 * Aussehen sich davon nicht aendern soll.
 *
 * Steht bewusst hinter der E-Mail-Regel oben und zaehlt genauso viel: sonst
 * bliebe ausgerechnet das E-Mail-Feld grau. */
.gruenden-main .feld input[aria-invalid='true'],
.gruenden-main .feld select[aria-invalid='true'],
.gruenden-main .feld textarea[aria-invalid='true'] {
  border-color: #b03d3d;
}

/* ==========================
   Beteiligte
   ========================== */
.personen {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Die vier Spalten stehen an einer Stelle, damit Kopfzeile und Zeilen nicht
   auseinanderlaufen. Die Positionsspalte ist die schmalste - darin steht nur
   ein Wort. */
.personen-kopf,
.person {
  display: grid;
  grid-template-columns: 130px minmax(0, 1.4fr) minmax(0, 1.6fr) 190px;
  gap: 14px;
  align-items: start;
}

.personen-kopf {
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #5c665f;
}

.person {
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 12px;
  margin: 0;
  min-width: 0;
}

/* Die erste Zeile ist die Leitung und faellt heraus: ohne sie hat der Antrag
   keinen Absender. */
.person:first-of-type {
  border-color: rgba(62, 124, 140, 0.45);
  background: var(--nebel);
}

/* Auf breiten Bildschirmen sagt die Kopfzeile, was in welcher Spalte steht -
   an den Feldern waere dieselbe Beschriftung dann doppelt. Fuer Vorlesegeraete
   bleibt sie erhalten, nur zu sehen ist sie nicht. */
@media (min-width: 861px) {
  .person > .feld > label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* Steht an der Stelle des Auswahlfelds in der ersten Zeile: die Leitung ist
   gesetzt und laesst sich nicht umstellen - im Antrag ist das "L" gedruckt. */
.person-fest {
  padding: 10px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--berg-dunkel);
}

/* ==========================
   Schmale Bildschirme
   ========================== */
/* Vier Spalten nebeneinander werden hier zu eng. Die Zeilen stapeln sich,
   und weil die Kopfzeile dann nichts mehr zuordnet, faellt sie weg - die
   Beschriftung an den Feldern kommt oben per Media Query zurueck. */
@media (max-width: 860px) {
  .personen-kopf {
    display: none;
  }

  .person {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}