/*
 * University of Bamberg corporate design - base stylesheet for simple sites.
 * Colours: Uni-Farben-Farbwerte (CMYK/RGB/HEX + 80/60/40/20 % tints).
 * Typography and link colours: www.uni-bamberg.de.
 * Reference implementation: softwaresuche-pc-pools/software-search.
 */
:root {
  /* Primary: Blau 541 C */
  --blau: #00457d;
  --blau-80: #336a97;
  --blau-60: #6690b1;
  --blau-40: #99b5cb;
  --blau-20: #ccdae5;
  --blau-10: #e6ecf2;
  --blau-dunkel: #003764;   /* hover/active on blue surfaces (website) */
  --link: #1a588a;          /* body links (website) */

  /* Accents - sparingly: highlights, status, info boxes */
  --gelb: #ffd300;          /* 116 C */
  --gelb-20: #fff6cc;
  --gruen: #97bf0d;         /* 376 C */
  --gruen-20: #eaf2cf;
  --rot: #e6444f;           /* 710 C */
  --rot-20: #fadadc;
  --grau: #878783;          /* Cool Gray 9 */
  --grau-20: #e7e7e6;

  --text: #333;
  --text-leise: #555;

  --schrift: "Open Sans", Arial, Helvetica, sans-serif;
  --kopf-hoehe: clamp(4rem, 20vw, 7.5rem);
  --content: min(58rem, calc(100% - 2rem));
  --radius: 4px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--schrift);
  line-height: 1.5;
  color: var(--text);
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

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

a:hover,
a:focus-visible {
  color: var(--blau-dunkel);
}

:focus-visible {
  outline: 2px solid var(--blau);
  outline-offset: 2px;
}

/*
 * Kopfmodul: blue band spanning the content column, rounded top right
 * corner (radius = half the band height), wordmark + seal flush right.
 * The header logo SVG has exactly the band's height and ends where the
 * band ends, so it must be shown at height: var(--kopf-hoehe).
 */
.kopf {
  display: grid;
  grid-template-columns: 1fr var(--content) 1fr;
  height: var(--kopf-hoehe);
  margin-top: 1rem;
}

.kopf::before {
  content: "";
  grid-area: 1 / 2;
  background: var(--blau);
  border-radius: 8px calc(var(--kopf-hoehe) / 2) 0 0;
}

.kopf .logo {
  grid-area: 1 / 2;
  justify-self: end;
}

.kopf .logo img {
  display: block;
  height: var(--kopf-hoehe);
}

/* Light variant ("Kopfmodul hell"): pair with header-logo-*-blue.svg */
.kopf.hell::before {
  background: var(--blau-20);
}

/* Left side of the band: site name and/or language switch */
.kopf-links {
  grid-area: 1 / 2;
  align-self: center;
  justify-self: start;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  /* the header logo is 2.35 x the band height wide - never run into it */
  max-width: calc(100% - 2.35 * var(--kopf-hoehe));
  padding-left: 0.75rem;
  line-height: 1.2;
  color: #fff;
  font-size: 0.875rem;
}

.kopf.hell .kopf-links {
  color: var(--blau);
}

.site-name {
  color: inherit;
  font-size: clamp(0.95rem, 2.5vw, 1.25rem);
  text-decoration: none;
}

.site-name:hover,
.site-name:focus-visible {
  color: inherit;
  text-decoration: underline;
}

.lang button {
  font: inherit;
  color: rgba(255, 255, 255, 0.75);
  background: none;
  border: 0;
  padding: 0.25rem;
  cursor: pointer;
}

.lang button:hover,
.lang button:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.lang button[aria-pressed="true"] {
  color: #fff;
  font-weight: 600;
}

.lang {
  white-space: nowrap;
}

@media (max-width: 22rem) {
  .kopf-links {
    padding-left: 0.25rem;
    font-size: 0.8125rem;
  }

  .lang button {
    padding: 0.25rem 0.125rem;
  }

  /* no room for both: the page's h1 still names the site */
  .kopf-links:has(.lang) .site-name {
    display: none;
  }
}

/*
 * Hauptnavigation: horizontal menu directly under the Kopfmodul band,
 * same width as the band. Light blue strip, blue links.
 * The current item must NOT use --blau: it would merge with the band above.
 * Current: --blau-80 + white (5.8:1). Hover/focus: --blau-20 + --blau-dunkel (8.5:1).
 * Mark the current item with aria-current="page".
 */
.hauptnav {
  width: var(--content);
  margin: 0 auto;
  background: var(--blau-10);
}

.hauptnav ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hauptnav a {
  display: block;
  padding: 0.6rem 0.9rem;
  color: var(--blau);
  text-decoration: none;
}

.hauptnav a:hover,
.hauptnav a:focus-visible {
  color: var(--blau-dunkel);
  background: var(--blau-20);
}

.hauptnav a[aria-current="page"] {
  color: #fff;
  background: var(--blau-80);
}

/* Breadcrumb / section line under the band (website: "Fakultäten > …") */
.bereich {
  width: var(--content);
  margin: 0 auto;
  padding: 0.75rem;
  background: var(--blau-10);
  color: var(--blau);
}

main {
  flex: 1;
  width: var(--content);
  margin: 0 auto;
  padding: 1rem 0 2rem;
}

/* Headings: Open Sans regular in uni blue, never bold/serif */
h1, h2, h3, h4 {
  color: var(--blau);
  font-weight: 400;
  line-height: 1.25;
  margin: 1.5em 0 0.5em;
}

h1 {
  font-size: 1.75rem;
  margin-top: 0.5em;
}

h2 {
  font-size: 1.35rem;
  font-weight: 600;
}

h3 {
  font-size: 1.125rem;
  font-weight: 600;
}

h4 {
  font-size: 1rem;
  font-weight: 600;
}

.lede {
  font-size: 1.15rem;
  color: var(--text-leise);
}

/* Buttons */
.button,
button.primary {
  display: inline-block;
  padding: 0.5rem 1rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--blau);
  border: 1px solid var(--blau);
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
}

.button:hover,
.button:focus-visible,
button.primary:hover,
button.primary:focus-visible {
  color: #fff;
  background: var(--blau-dunkel);
}

.button.sekundaer {
  color: var(--blau);
  background: #fff;
}

.button.sekundaer:hover,
.button.sekundaer:focus-visible {
  background: var(--blau-10);
}

/* Forms */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 0.6rem;
  font: inherit;
  color: var(--text);
  border: 1px solid var(--blau-40);
  border-radius: var(--radius);
  background: #fff;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--blau);
  outline-offset: -1px;
}

label {
  display: block;
  margin: 1rem 0 0.25rem;
  font-weight: 600;
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--blau-10);
}

th {
  color: #fff;
  background: var(--blau);
  font-weight: 600;
}

tbody tr:hover {
  background: var(--blau-10);
}

.table-scroll {
  overflow-x: auto;
}

/* Boxes: info (blue), aktuell (yellow header like the website's news box) */
.box {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--blau-10);
  border-radius: 0 8px 0 0;
}

.box > :first-child {
  margin-top: 0;
}

.box > :last-child {
  margin-bottom: 0;
}

.box.aktuell {
  padding: 0;
  background: #fff;
  border: 1px solid var(--blau-10);
}

.box.aktuell > h2 {
  margin: 0;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  color: #000;
  background: var(--gelb);
  border-radius: 0 8px 0 0;
}

.box.aktuell > :not(h2) {
  padding: 0 1rem;
}

.box.erfolg {
  background: var(--gruen-20);
  border-left: 4px solid var(--gruen);
}

.box.warnung {
  background: var(--gelb-20);
  border-left: 4px solid var(--gelb);
}

.box.fehler {
  background: var(--rot-20);
  border-left: 4px solid var(--rot);
}

/* Side navigation (website: blue list with white text) */
.subnav {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--blau);
}

.subnav a {
  display: block;
  padding: 0.6rem 1.25rem;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid var(--blau-80);
}

.subnav a:hover,
.subnav a:focus-visible,
.subnav a[aria-current="page"] {
  color: #fff;
  background: var(--blau-dunkel);
}

footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 1.25rem max(1rem, calc((100% - 58rem) / 2));
  background: var(--blau-10);
  font-size: 0.875rem;
}

footer a {
  color: var(--blau);
  text-decoration: none;
}

footer a:hover,
footer a:focus-visible {
  text-decoration: underline;
}