/*
 * Seezeit · Umfrageliste (Paket 1.5, überarbeitet in Paket 1.5c): die Startseite der Installation unter der reinen Adresse
 * (layout_survey_list.twig).
 *
 * Diese Datei ersetzt css/survey-list.css des Elternthemes (leer bis auf einen Kommentar). Das Elterntheme lädt sie über
 * registerTemplateCssFile('./css/survey-list.css'), und LimeSurvey nimmt die Datei des Kindthemes zuerst
 * (LS_Twig_Extension::getTemplateForRessource). Sie gilt nur, wenn "seezeit" das globale Standard-Theme der Installation ist
 * (Konfiguration, Globale Einstellungen, Standardvorlage); die Entscheidung darüber trifft die nutzende Person. Lokal ist es zum Prüfen
 * so eingestellt (UMGEBUNG.md).
 *
 * Aufbau (Rückmeldung vom 04.10., BRIEF.md 3, Systemseiten): Kopfzeile mit Logo (nav_bar.twig, seezeit-kopf.css), darunter Sand. Keine
 * weiße Fläche um die Liste. Die Seitenüberschrift (h1) ist der Satz "Die folgenden Umfragen sind verfügbar", darunter stehen die
 * Umfragen als Kacheln im Seezeit-Kartenstil direkt auf dem Sand, dann der Kontakthinweis; der Name der Installation steht klein im Fuß.
 * Das Markup kommt aus layout_survey_list.twig (Twig-Liste, Punkt 3). Farben nur als Rollen-Tokens der Variante.
 *
 * Kachel (KOMPONENTEN.md 0 und 1, qa/m1/typeset.md V9): Fläche mit Kontur, Unterkante, Radius und Schatten wie jede Karte; Titel 18/800,
 * Zeilenhöhe 1,25, nicht unterstrichen, bei Hover Orange-Ink; Aktion 16/700 als dunkelblaue, unterstrichene Textaktion mit Pfeil. Es
 * gibt genau ein Ziel je Kachel, deshalb ist die ganze Kachel der Link (ein Tabstopp, ein Ring um die ganze Kachel, 3 px Dunkelblau).
 * Die Aktion ist bewusst keine gefüllte Schaltfläche: Mit mehreren Umfragen gäbe es sonst mehrere orange Knöpfe auf einer Seite
 * (BRIEF.md 3: je Seite genau eine gefüllte Aktion). Spalten nach Breite (mindestens 20 rem, auf dem Handy eine Spalte), gleich hohe
 * Kacheln je Zeile; der Rest einer höheren Nachbarkachel sammelt sich unten als Polster.
 */

/* ========================================================================== Rahmen */
.container-md {
  width: 100%;
  max-width: calc(var(--sz-content-max) + 2 * var(--sz-gutter));
  margin: 0 auto;
  padding: var(--sz-gutter-top) var(--sz-gutter) var(--kern-space-48);
}
/* min-height: Das Elterntheme setzt per JavaScript (theme.js, "Survey list container") ein Inline-Maß, damit die Fläche die Seite füllt
   (Fensterhöhe minus Kopf und Fuß). Ohne Karte um die Liste ließe das nur eine Leerfläche unter dem Inhalt. Ein Inline-Maß schlägt
   nur !important; deshalb hier mit !important zurückgenommen. */
#surveys-list-container {
  min-height: 0 !important;
  margin: 0;
  padding: 0;
}

/* ========================================================================== Seitenüberschrift */
/* Der Satz über der Liste ist der Seitentitel: 32 px, 900, bis 550 px 28 px (wie auf der Willkommensseite). Der Name der Installation
   ("LimeSurvey") steht nicht mehr hier, sondern im Fuß. 8 px mehr Abstand nach oben als der Rand der Seiten sonst hat: Über einer
   Überschrift steht mehr Abstand als darunter (KOMPONENTEN.md 0). */
#surveys-list-container .survey-list-heading {
  margin: var(--kern-space-8) 0 var(--kern-space-24);
}
#surveys-list-container .survey-list-heading .form-heading {
  max-width: none;
  margin: 0;
  font-size: var(--kern-font-size-32);
  font-weight: 900;
  line-height: 1.15;
  text-wrap: balance;
  color: var(--kern-color-layout-text-default);
}
@media (max-width: 550px) {
  #surveys-list-container .survey-list-heading .form-heading {
    font-size: 1.75rem;
  }
}

/* ========================================================================== Kacheln */
/* Raster: Spalten nach Inhalt (mindestens 20 rem, bei schmalem Fenster eine Spalte), Abstand wie zwischen den Fragekarten */
#surveys-list-container .surveys-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--sz-card-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
#surveys-list-container .surveys-list > li {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
}
/* Die Kachel ist der Link. ID in der Regel: Das Elterntheme und die Variante färben und unterstreichen jeden Link. */
#surveys-list-container a.sz-tile {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--kern-space-12);
  min-width: 0;
  margin: 0; /* das Elterntheme rückt Links der Liste ein (".surveys-list li a": margin-left 0,5 em) */
  padding: var(--kern-space-16);
  color: var(--kern-color-layout-text-default);
  text-decoration: none;
  background-color: var(--color-surface-active);
  border: 1px solid var(--kern-color-layout-border);
  border-bottom: 3px solid var(--kern-color-layout-edge);
  border-radius: var(--kern-radius-l);
  box-shadow: var(--kern-shadow-raised);
  transition: border-color 160ms ease-out;
}
@media (min-width: 551px) {
  #surveys-list-container a.sz-tile {
    padding: var(--kern-space-24);
  }
}
/* Hover nur mit Maus (sonst bleibt er nach dem Tippen hängen): Kontur dunkler, Titel in Orange-Ink (erlaubte Hover-Farbe). Der Fokusring
   (3 px Dunkelblau, 2 px Abstand) kommt von ":root :focus-visible" in seezeit-aktionen.css und liegt um die ganze Kachel. */
@media (hover: hover) {
  #surveys-list-container a.sz-tile:hover {
    border-color: var(--kern-color-layout-text-muted);
  }
  #surveys-list-container a.sz-tile:hover .sz-tile__title {
    color: var(--color-link-hover);
  }
}
#surveys-list-container .sz-tile__title {
  display: block;
  font-size: var(--kern-font-size-18);
  font-weight: 800;
  line-height: 1.25;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
  color: var(--kern-color-layout-text-default);
}
/* Aktion: Textaktion in Dunkelblau, unterstrichen, mit Pfeil (Remix Icon "arrow-right-line", für Screenreader leer). Der Pfeil ist ein
   Inline-Block: Die Unterstreichung des Textes läuft nicht unter ihn. */
#surveys-list-container .sz-tile__action {
  display: block;
  font-size: var(--kern-font-size-16);
  font-weight: 700;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--kern-color-layout-text-default);
}
#surveys-list-container .sz-tile__action::after {
  content: "\ea6c";
  content: "\ea6c" / "";
  display: inline-block;
  margin-left: var(--kern-space-8);
  font-family: "remixicon";
  font-weight: 400;
  font-size: 1.25em;
  line-height: 1;
  vertical-align: -0.15em;
  text-decoration: none;
}

/* ========================================================================== Kontakthinweis */
#surveys-list-container .survey-contact {
  max-width: 56ch;
  margin: var(--kern-space-32) 0 0;
  font-size: var(--kern-font-size-14);
  line-height: 1.5;
  color: var(--kern-color-layout-text-muted);
}

/* ========================================================================== Sprachwahl ohne JavaScript */
/* Mit JavaScript ist sie ausgeblendet (die Sprachwahl liegt im Menü der Kopfzeile). Ohne JavaScript steht sie wie auf der Willkommensseite
   (seezeit-kopf.css): Beschriftung gedämpft, Auswahl mit Kontur #486a7c. */
#surveylist-language-changer {
  margin: 0 0 var(--kern-space-24);
}
#surveylist-language-changer .form-change-lang {
  align-items: center;
  gap: var(--kern-space-8) var(--kern-space-12);
  margin: 0;
  padding: 0;
}
#surveylist-language-changer .form-change-lang > [class*="col-"] {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
  padding: 0;
}
#surveylist-language-changer .form-change-lang .control-label {
  margin: 0;
  padding: 0;
  font-size: var(--kern-font-size-14);
  font-weight: 400;
  line-height: 1.4;
  color: var(--kern-color-layout-text-muted);
}
#surveylist-language-changer #lang-select::after {
  position: absolute;
  top: 50%;
  right: var(--kern-space-12);
  z-index: 11;
  font-size: 1.25rem;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

/* ========================================================================== Fuß */
/* Name der Installation (global eingestellt, meist "LimeSurvey") und Verweis auf das Werkzeug, klein und gedämpft: beides 14 px, 400; der
   Link ist wie alle Links Dunkelblau und unterstrichen (typeset.md V9). Das Bild "Powered by LimeSurvey" und das große Logo werden im Layout
   nicht mehr ausgegeben. Das Elterntheme gibt dem Fuß eine feste Höhe, einen weißen Grund und großes Polster; hier steht er ohne Grund
   auf Sand unter den Kacheln. */
#surveyListFooter {
  width: 100%;
  height: auto;
  margin: var(--kern-space-48) 0 0;
  padding: 0;
  border-top: 0;
  background-color: transparent;
  font-size: var(--kern-font-size-14);
  line-height: 1.5;
  color: var(--kern-color-layout-text-muted);
  text-align: left;
}
#surveyListFooter p {
  margin: 0;
}
#surveyListFooter a {
  font-size: inherit;
  font-weight: 400;
  color: var(--kern-color-layout-text-default);
  text-decoration: underline;
  text-underline-offset: 3px;
}
#surveyListFooter a:hover {
  color: var(--color-link-hover);
}