@charset "UTF-8";

:root {
  --luh-primary: #00509b;
  --luh-primary-rgb: 0, 80, 155;
  --luh-secondary: #b4c624;
  --luh-secondary-rgb: 180, 198, 36;
  --luh-text: #0a0a0a;
  --luh-text-rgb: 10, 10, 10;
  --luh-grey-1: #e6e6e6;
  --luh-grey-1-rgb: 230, 230, 230;
  --luh-grey-2: #f7f7f7;
  --luh-grey-2-rgb: 247, 247, 247;
  --luh-text-2: #2b2b2b;
  --luh-text-2-rgb: 43, 43, 43;
  
  --theme-success: #008c42;
  --theme-success-rgb: 0, 140, 66;
  --theme-info: #006f89;
  --theme-info-rgb: 0, 111, 137;
  --theme-warning: #eb690b;
  --theme-warning-rgb: 235, 105, 11;
  --theme-danger: #e20026;
  --theme-danger-rgb: 226, 0, 38;
  
  --theme-body-color: var(--luh-text-2);
  --hover: rgb(0, 53.68, 104);
  
  --quetschung: calc((100vw - 1164px) / 2);
}

@import url("fonts.css");

html, body {
  margin: 0;
  padding: 0;
  font-size: 18px;
}

body {
  font-family: "Source Sans Pro", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.2;
  color: var(--theme-body-color);
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 100vw;
}

/* ---------- Kopfbereich: Topbar + Titel + Navigation ---------- */

header {
  display: flex;
  flex-flow: column;
  width: 100vw;
  border-bottom: 1rem solid var(--luh-secondary);
  margin-bottom: 2rem;
}

.topbar-container {
  background: var(--luh-grey-1);
  /*line-height: 1.2rem;*/
  align-self: stretch;
}

.topbar {
  font-size: 13px;
  height: 2.6875rem;
  margin: 0 var(--quetschung);
  padding: 0 1rem;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
}

#logo-link {
  align-self: center;
}

.dev-mode #logo-link img {
  animation: logo-hue 30s linear infinite;
}

@keyframes logo-hue {
  from {
    filter: hue-rotate(0deg) saturate(4);
  }

  to {
    filter: hue-rotate(360deg) saturate(4);
  }
}

.topbar .right {
  align-self: flex-end;
  display: flex;
  flex-flow: row;
  gap: 1rem;
  list-style-type: none;
  padding: 0;
}

.topbar .right li {
  display: inline;
}

.topbar .right a {
  text-decoration: none;
  font-size: 16px;
  color: inherit;
  padding-left: 6px;
}

.topbar .right a:hover {
  text-decoration: underline;
  color: var(--theme-primary);
}

.header-container {
  align-self: stretch;
  padding-top: 2rem;
  padding-bottom: 0.33rem;
}

.header {
  margin: 0 var(--quetschung);
  padding: 0 1rem;
  display: flex;
  flex-flow: row;
  align-items: baseline;
  justify-content: space-between;
  /*min-height: 4.44rem;*/
}

h1.page-title {
  font-weight: 400;
  font-size: 1.33rem;
  margin: 0;
}

.page-title a,
.page-title a:hover,
.page-title a:visited {
  text-decoration: none;
  color: inherit;
}

.navbar {
  align-self: stretch;
  margin-top: .33rem;
  width: 100vw;
  min-height: 3rem;
}

.c-navigation-main {
  margin: 0 var(--quetschung);
  padding: 0 1rem;
  display: flex;
  flex-flow: row wrap;
  list-style-type: none;
  align-items: flex-start;
}

.c-navigation-main__item {
  position: relative;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  list-style-type: none;
  padding: .67rem 1rem;
}

.c-navigation-main__item > .c-navigation-main__link {
  display: block;
  color: var(--luh-text-2);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.33rem;
  line-height: 1.67rem;
  border-bottom: .17rem solid transparent;
  transition: 250ms color;
}

.c-navigation-main__item > .c-navigation-main__link:hover {
  border-bottom-color: var(--luh-secondary);
}

.c-navigation-main__item.active > .c-navigation-main__link {
  border-bottom-color: var(--luh-primary);
}

label.c-navigation-main__link {
  cursor: pointer;
}

.c-navigation-main__item--has-dropdown > .c-navigation-main__link::after {
  content: "\25BE";
  font-size: .78em;
  color: var(--luh-primary);
  margin-left: .35rem;
}

/* Submenü des aktiven Hauptlinks: dauerhaft geöffnetes Panel unter der
Hauptnavigation (.c-dropdown--open) */

.c-dropdown__overview {
  border-bottom: 1px solid var(--luh-grey-1);
  margin-bottom: .33rem;
}

.c-dropdown__overview a {
  font-weight: 600;
}

/* Dauerhaft geöffnetes Panel mit dem Dropdown-Inhalt des aktiven
Hauptlinks (wie das c-dropdown auf luis.uni-hannover.de, nur ohne
Schließen-Knopf); Einträge fließen zeilenweise, zweite Ebene
ebenfalls horizontal; Smartphones/Tablets bekommen es nicht */
.c-dropdown--open {
  background: var(--luh-grey-1);
  padding: .33rem 1rem .5rem;
  margin: 0 var(--quetschung);
}

.c-dropdown-open__columns {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.c-dropdown-open__columns > li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.c-dropdown-open__columns > li > a {
  display: block;
  padding: .55rem 1rem;
  color: var(--luh-text-2);
  text-decoration: none;
  font-size: 1.1rem;
  line-height: 1.4rem;
  font-weight: 400;
  white-space: nowrap;
}

/* Zweite Ebene: als Geschwister im selben Flex-Fluss (horizontal),
eingerückt */
.c-dropdown-open__columns .c-dropdown-open__column--sub > a {
  /*padding: .55rem 1rem .55rem 2.5rem;*/
  color: var(--luh-text-2);
  text-decoration: none;
  /*font-size: 1rem;*/
  line-height: 1.4rem;
  font-weight: 400;
  white-space: nowrap;
  display: block;
}

.c-dropdown-open__columns > li > a:hover,
.c-dropdown-open__columns .c-dropdown-open__column--sub > a:hover {
  background: var(--luh-grey-2);
  color: var(--luh-primary);
}

.c-dropdown-open__columns li.active > a {
  color: var(--luh-primary);
  font-weight: 600;
}

/* ---------- Hauptbereich ---------- */

.main {
  min-height: 60vh;
  margin: 0 var(--quetschung);
  padding: 0 1rem;
}

#breadcrumbs {
  /*font-size: .89rem;*/
  font-weight: 400;
  /*color: var(--luh-text-2);*/
  /*margin-left: .67rem;*/
}

#breadcrumbs a {
  /*color: var(--luh-primary);*/
  text-decoration: none;
}

#breadcrumbs a:hover {
  text-decoration: none;
}

#message {
  font-size: 1rem;
}

#message .success,
#message span.success {
  color: var(--theme-success);
}

#message span.info {
  color: var(--theme-info);
}

#message span.error,
#message span.warning {
  color: var(--theme-danger);
}

.role-label {
  display: inline-block;
  font-size: .78rem;
  color: var(--theme-danger);
  background: var(--luh-grey-2);
  border-radius: .17rem;
  padding: 0 .35rem;
}

#content a {
  color: var(--luh-primary);
}

#content a:hover {
  color: var(--hover);
}

/* ---------- Admin-Übersicht (/admin) ---------- */

.admin-overview {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 1.5rem;
}

.admin-overview > li {
  padding: .55rem 0;
  border-bottom: 1px solid var(--luh-grey-1);
}

.admin-overview > li:last-child {
  border-bottom: none;
}

.admin-overview > li > a {
  display: block;
  color: var(--luh-text);
  text-decoration: none;
  font-weight: 600;
}

.admin-overview > li > a:hover {
  color: var(--luh-primary);
}

.admin-overview ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

.admin-overview ul li {
  padding: .3rem 0;
}

.admin-overview ul a {
  display: block;
  color: var(--luh-text-2);
  text-decoration: none;
  line-height: 1.4rem;
}

.admin-overview ul a:hover {
  color: var(--luh-primary);
}

/* ---------- Hilfemenü (Content) ---------- */

.help-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 2rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--luh-grey-1);
}

.help-nav-title {
  margin: 0;
  padding: .55rem 0;
  font-weight: 600;
}

.help-nav > ul {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  gap: 0 2.5rem;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.help-nav > ul > li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.help-nav > ul > li > a {
  display: block;
  padding: .55rem 0;
  color: var(--luh-text);
  text-decoration: none;
  font-weight: 600;
}

.help-nav > ul > li > a:hover {
  color: var(--luh-primary);
}

.help-nav > ul > li > ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.help-nav > ul > li > ul > li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.help-nav > ul > li > ul a {
  display: block;
  padding: .3rem 0;
  color: var(--luh-text-2);
  text-decoration: none;
  line-height: 1.4rem;
}

.help-nav > ul > li > ul a:hover {
  color: var(--luh-primary);
}

.help-nav li.active > a {
  color: var(--luh-primary);
  font-weight: 600;
}

/* ---------- Tabellen ---------- */

table.person,
table.accounts,
table.log {
  border-collapse: collapse;
  width: 100%;
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

table.person td,
table.accounts td,
table.log td,
table.person th,
table.accounts th,
table.log th {
  padding: .55rem .75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--luh-grey-1);
}

table.person tr.persontab td,
table.accounts thead th,
table.log thead th {
  background: var(--luh-grey-1);
  font-weight: 600;
  color: var(--luh-text);
}

table.accounts tbody tr:hover,
table.log tbody tr:hover,
table.person tbody tr:hover td.value {
  background: var(--luh-grey-2);
}

table.log {
  border: 1px solid var(--luh-grey-1);
}

table.log th.sorted {
  background: var(--luh-grey-2);
}

table.log tr.adminentry td {
  color: var(--luh-text-2);
}

table.person td.value {
  color: var(--luh-text);
}

.c-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

dt {
  font-weight: 600;
}

/* ---------- Formulare ---------- */

dl.form {
  margin: 0 0 1.5rem;
}

dl.form dt {
  margin-top: 1rem;
  font-weight: 600;
  color: var(--luh-text);
}

dl.form dd {
  margin: .25rem 0 0;
}

dl.form input[type="text"],
dl.form input[type="password"],
dl.form input[type="email"],
dl.form input[type="date"],
dl.form select,
dl.form textarea,
form input[type="text"],
form input[type="password"],
form input[type="email"],
form input[type="date"],
form select,
form textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--luh-text-2);
  background: #fff;
  border: 1px solid var(--luh-grey-1);
  border-radius: .17rem;
  padding: .5rem .65rem;
  width: 100%;
  max-width: 28rem;
  box-sizing: border-box;
}

dl.form input:focus,
dl.form select:focus,
dl.form textarea:focus,
form input:focus,
form select:focus,
form textarea:focus {
  outline: none;
  border-color: var(--luh-primary);
  box-shadow: 0 0 0 .11rem rgba(var(--luh-primary-rgb), .25);
}

dl.form input[readonly],
form input[readonly] {
  background: var(--luh-grey-2);
}

dl.form input[type="checkbox"],
dl.form input[type="radio"],
form input[type="checkbox"],
form input[type="radio"] {
  margin-right: .45rem;
}

ul.errors {
  margin: .25rem 0 0;
  padding: 0;
  list-style-type: none;
  color: var(--theme-danger);
  font-size: .95rem;
}

span.hasMessage {
  cursor: help;
  border-bottom: 1px dotted var(--theme-warning);
}

label {
  min-width: 10rem;
  display: inline-block;
}

/* ---------- Pers. Daten (DataControl-Formular) ---------- */

.c-data-list {
  list-style-type: none;
  padding-left: 0;
}

.c-data-list__group {
  font-weight: 600;
  margin-top: .67rem;
}

.c-data-list__group--1 {
  font-size: 1.1rem;
}

.c-data-list__group--2 {
  font-size: 1rem;
}

.c-data-list__group--3 {
  font-size: .89rem;
}

.c-data-list__item {
  margin-top: .33rem;
  font-weight: 400;
}

.c-data-list__item--1 {
  font-size: 1rem;
}

.c-data-list__item--2,
.c-data-list__item--3 {
  font-size: .89rem;
}

.c-data-list__description {
  display: block;
  color: var(--luh-text-2);
  font-size: .89rem;
  font-weight: 400;
}

/* ---------- Buttons ---------- */

input[type="submit"],
.c-button {
  background: var(--luh-primary);
  color: #fff;
  padding: .61rem 1rem .56rem;
  font-family: inherit;
  font-weight: 600;
  line-height: 1.17rem;
  display: inline-block;
  transition: background 250ms ease-in-out, box-shadow 250ms ease-in-out;
  cursor: pointer;
  border-radius: .17rem;
  font-size: .89rem;
  border: .06rem solid transparent;
  overflow-wrap: break-word;
  text-decoration: none;
}

input[type="submit"]:hover,
.c-button:hover {
  border-color: var(--hover);
  box-shadow: 0 .11rem .33rem 0 rgba(0, 0, 0, .33);
  background: var(--hover);
  color: #fff;
}

.c-button--footer .u-icon:before {
  font-family: icomoon;
  font-size:.6666666667rem;
  color: white;
  padding-right: 6px;
}
@media print {
  .c-button--footer {
    display:none;
  }
}

/* ---------- Footer ---------- */

footer {
  background: var(--luh-grey-1);
  min-height: 10vh;
  width: 100vw;
}

.footer {
  font-size: 13px;
  margin: 0 var(--quetschung);
  padding: 0 1rem;
  display: flex;
  flex-flow: row;
  align-items: center;
}

.footer-container {
  padding-top: 1rem;
}

.footer-links {
  display: flex;
  flex-flow: row wrap;
  margin-left: auto;
  list-style-type: none;
  padding: 0;
}

.footer-link:hover {
  color:#0a0a0a;
  text-decoration:none;
}

.footer-link {
  color: var(--luh-text-2);
  text-decoration: underline;
  font-size: .89rem;
  margin: 1em;
}

.footer-link:hover {
  color: #0a0a0a;
  text-decoration: none;
}

/* ---------- Globale Listen ---------- */

ul {
  list-style-type: disc;
  padding-left: 1.5rem;
}

#sitemenu ul,
#breadcrumbs ul,
.topbar ul,
.footer ul {
  list-style-type: none;
  padding-left: 0;
}

/* ---------- Responsiv (Smartphones/Tablets) ---------- */

@media screen and (max-width: 1176px) {
  :root {
    --quetschung: 1em;
  }
  
  .navbar ul li {
    margin: 0;
    border-right: none;
    padding-right: 1.39rem;
  }
}

@media screen and (max-width: 48em) {
  
  html, body {
    font-size: 16px;
  }
  
  .main {
    padding: 0;
  }
  
  .topbar,
  .header,
  .footer {
    flex-flow: column;
    align-items: flex-start;
    gap: .5rem;
  }
  
  .topbar {
    min-height: 2.6875rem;
    height: auto;
    margin: 0; 
    display: block; 
  }
  
  .c-dropdown--open {
    box-shadow: none;
    margin: 0;
    padding: 0;
  }
  
  .c-dropdown-open__columns {
    flex-flow: column;
  }
  
  .c-dropdown-open__columns > li,
  .c-dropdown-open__columns .c-dropdown-open__column--sub > a {
    width: 100%;
  }
  
  .c-navigation-main {
    flex-flow: column;
    padding: 0;
  }
  
  .c-navigation-main__item {
    border-bottom: 1px solid var(--luh-grey-1);
    width: 100%;
  }
  
  .c-navigation-main__item > .c-navigation-main__link {
    display: block;
    width: 100%;
    font-size: 1.15rem;
  }
  
  .c-navigation-main__item > .c-navigation-main__link:hover,
  .c-navigation-main__item.active > .c-navigation-main__link {
    border-bottom: none;
    color: var(--luh-primary);
  }
  
  .footer-links {
    margin-left: 0;
  }

  .help-nav {
    flex-flow: column;
  }

  .help-nav > ul {
    flex-flow: column;
  }
}

@media print {
  .topbar-container,
  .navbar,
  #breadcrumbs {
    display: none;
  }
}


/* ---------- Icons ---------- */

.u-icon:before {
  font-family:icomoon;
  line-height: 1em;
  color: var(--luh-primary);
}

.u-icon--earth2:before {
  content:"u"
}
.u-icon-after--earth2:after {
  content:"u"
}

.u-icon--envelop3:before {
  content:"g"
}
.u-icon-after--envelop3:after {
  content:"g"
}
.u-icon--envelop5:before {
  content:"h"
}
.u-icon-after--envelop5:after {
  content:"h"
}