/* Schriftart DIN Next Webfonts */
@font-face {
  font-family: "DIN Next";
  src: url("/static/fonts/DINNextLTW05-Regular.woff2") format("woff2");
  font-weight: 400;
}
/* Schriftart DIN Next Webfonts */
@font-face {
  font-family: "DIN Next";
  src: url("/static/fonts/DINNextLTW05-Medium.woff2") format("woff2");
  font-weight: 500;
}
/* Schriftart DIN Next Webfonts */
@font-face {
  font-family: "DIN Next";
  src: url("/static/fonts/DINNextLTW05-Bold.woff2") format("woff2");
  font-weight: 700;
}


/* ************************* */
/* Grundlayout */
/* ************************* */
body {
  margin: 0;
  font-family: "DIN Next", Arial, sans-serif;
  font-size: 17px; /*  ungefähr Schriftgröße der alten Webseite  */
  line-height: 1.45;
  color: #111;
  background: #fff;
}
/* ETH Logo */
.eth-logo-img {
  height: 39.8px; /* Grösse des ETH Logos */
  width: auto; 
  /* max-width: 210px; */
  display: block;
}
/* zentrale Seite */
.layout {
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 0 20px;   /* wichtig für Rand links/rechts */
}
/* Sidebar stabil halten */
.sidebar {
  width: 340px; /* Breite der Sidebar */
  flex-shrink: 0;
  font-size: 17px;
  line-height: 1.15;
}


/* Grid für Personen, die unter Alphabet gelistet sind */
.alphabet-grid {
    display: grid;
    grid-template-columns: repeat(5, 170px);
    gap: 8px;
    max-width: none;
}
/* Grid für Personen, die unter Alphabet gelistet sind */
.alphabet-grid a {
  display: flex;
  justify-content: space-between;
  text-align: center;
  padding: 10px;
  font-size: 28px;
  background: #eef3f7;
  border-radius: 4px;
  text-decoration: none;
}
/* Farbe für die Anzahl der Personen */
.count {
  font-size: 14px;
  color: #666;
}

/* Responsive Anpassungen für alphabetisches Grid */
@media (max-width: 1300px) {
    .alphabet-grid {
        grid-template-columns: repeat(4, 170px);  
    }
}
/* Responsive Anpassungen für alphabetisches Grid */
@media (max-width: 1200px) {
    .alphabet-grid {
        grid-template-columns: repeat(3, 170px);
    }
}
/* Responsive Anpassungen für alphabetisches Grid */
@media (max-width: 1100px) {
    .alphabet-grid {
        grid-template-columns: repeat(2, 170px);
    }
}
/* Responsive Anpassungen für alphabetisches Grid */
@media (max-width: 1000px) {
    .alphabet-grid {
        grid-template-columns: repeat(1, 170px);
    }
}


/* Personen Sidebar */
.person-sidebar {
  width: 340px;
  margin-top: 17px;
}
/* Personen Sidebar */
.person-nav,
.person-nav-names {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
/* Personen Sidebar */
.person-nav > li {
  margin-bottom: 3px;
}
/* Personen Sidebar */
.person-nav-names {
  padding-left: 16px;
  margin-top: 2px;
  font-size: 16px;
  line-height: 1.22;
}
/* Personen Sidebar */
.person-nav a {
  color: #111;
  text-decoration: none;
}
/* Personen Sidebar */
.person-nav a:hover {
  color: #1a5fb4;
  text-decoration: underline;
}
/* Personen Sidebar */
.person-nav a.nav-active {
  color: #1a5fb4;
  text-decoration: none;
  font-weight: 500;
}
/* Personen Sidebar */
.person-nav .nav-active {
  font-weight: 500;
}
/* Farbe für die Anzahl der Personen */
.person-count {
  color: #666;
  font-size: 0.95em;
}


/* Content flexibel lassen (wichtig für viele Bilder) */
.content {
  flex: 1;
  min-width: 0;
}

/* Titel */
h1 {
  font-size: 34px;
  font-weight: 400;
  margin-bottom: 16px;
}
/* Untertitel */
h2 {
  font-size: 23px;
  font-weight: 400;
  margin-top: 30px;
  margin-bottom: 12px;
  border-bottom: 1px solid #d8d8d8;
  padding-bottom: 8px;
}
/* Untertitel */
h3 {
  font-size: 15px;
  font-weight: 600;
}

/* Links */
a {
  color: #1a5fb4;
  text-decoration: none;
}

/* Links beim Hover */
a:hover {
  text-decoration: underline;
}


/* ************************* */
/* Einstellungen für Button in Warenkorb legen/bereits im Warenkorb/nicht buchbar */
/* ************************* */
/* Einstellungen für Button in Warenkorb legen etc. */
.btn,
.btn-primary,
.btn-disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;          /* feste Höhe */
  width: 268px;   /* statt min-width für konstante Abstand zwischen Buttons */
  background: #0069b4;
  color: #fff !important;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  text-align: center;
  border: none;
  border-radius: 0;
  cursor: pointer;
  line-height: 1;
  vertical-align: middle;
  margin: 0;
}
/* Einstellungen für Button in Warenkorb etc. beim Hover */
.btn:hover,
.btn-primary:hover {
  background: #00508a;
  text-decoration: none;
}
/* Einstellungen für Button in Warenkorb etc. bei Deaktivierung */
.btn-disabled {
  background: #999;
  cursor: default;
}
/* sorgt dafür, dass es bei meine Exp. */
/* keinen Zeilenumbruch gibt bei Vorlesung und Drop-Down Kurswahl */
/* im Fall, dass Dozent mehrere Vorlesungen hat. */
.nowrap {
  white-space: nowrap;
}

/* ************************* */
/* ETH Meta-Header (schwarzer Balken oben)*/
/* ************************* */
.eth-meta-header {
  background: #1f1f1f;
  color: #fff;
  font-size: 14px;
  line-height: 1.15;
}
/* ETH Meta-Header */
.eth-meta-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 5.5px 20px; /* Breite des Meta-Headers */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* ETH Meta-Header */
.eth-meta-header a {
  color: #fff;
  text-decoration: none;
  font-weight: 400;
}
/* ETH Meta-Header */
.eth-meta-header a:hover {
  text-decoration: underline;
}
/* ETH Meta-Header */
.eth-breadcrumb-mini {
  letter-spacing: 0.2px;
}
/* ETH Meta-Header */
.eth-breadcrumb-mini span {
  color: #aaa;
  margin: 0 8px;
}


/* ************************* */
/* ETH Header (Bereich unter dem Meta-Header/schwarzen Balken) */
/* ************************* */
.eth-header {
  background: #fff;
  /* border-bottom: 1px solid #ddd; */
}
/* ETH Header */
.eth-header-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 64px 8px 62px 20px; /* 64px, 62px sind Abstand oben und unten */
  display: flex;
  align-items: flex-start;
  gap: 108px;  /* Lücke zwischen Logo und Titel */
}
/* ETH Header */
.eth-logo {
  display: flex;
  align-items: flex-end;
  /* margin-left: -4px; zur Feinjustierung, nicht benötigt */
}
/* ETH Header */
.eth-logo a {
  font-weight: 700;
  font-size: 22px;
  color: #000;
  text-decoration: none;
}
/* ETH Header */
.eth-title {
  display: flex;
  align-items: flex-end;
  transform: translateY(14px);   /* feinjustieren */
}
/* ETH Header */
.eth-title a {
  font-size: 25px; /* Grösse Titel Vorlesungsexperimente neben ETH Logo */
  color: #333;
  text-decoration: none;
}


/* ************************* */
/* Haupt- und User-Navigation, unten weiterer css */
/* ************************* */
/* Suchfeld in der Navigation */
.nav-search {
  margin-left: auto;
  cursor: pointer;
}
/* Login-Link in der User-Navigation */
.user-nav-login,
.logout-form {
  margin-left: auto;
}
/* Logout-Link in der User-Navigation */
.logout-form {
  margin-left: auto;
  margin-bottom: 0;
}
/* Logout-Link in der User-Navigation */
.logout-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: #444;
  cursor: pointer;
}
/* Logout-Link in der User-Navigation */
.logout-link:hover {
  text-decoration: underline;
}
/* ************************* */
/* Login-Seite */
/* ************************* */
.login-panel {
  max-width: 420px;
  scroll-margin-top: 95px;
}
/* Wenn per #login-form angesprungen wird, kurz optisch hervorheben */
.login-panel:target {
  animation: loginTargetHighlight 1.2s ease-out;
}
/* Wenn per #login-form angesprungen wird, kurz optisch hervorheben */
@keyframes loginTargetHighlight {
  from {
    background: #eef4fb;
  }
  to {
    background: transparent;
  }
}


/* ************************* */
/* Einstellungen für den oberen Experimentblock */
/* ************************* */
.experiment-detail-page {
  margin-top: 23px; /* Rückt den ganzen oberen Experimentblock samt Überschrift. */
}
/* Einstellungen für den oberen Experimentblock */
.experiment-title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 16px; /* Rückt Titelbild mitsamt Erklärung */
}
/* Einstellungen für den oberen Experimentblock */
.experiment-title-row h1 {
  margin: 0;
}
/* Einstellungen für den oberen Experimentblock */
.experiment-number {
  color: #666;
  font-size: 18px;
  white-space: nowrap;
}
/* Einstellungen für den oberen Experimentblock */
.experiment-intro {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 28px; /* Rückt Abschnitt mit "Videos zum Experiment" etv. weiter nach unten */
}
/* Einstellungen für den oberen Experimentblock */
.experiment-title-image {
  margin: 0;
  flex: 0 0 160px;
}
/* Einstellungen für den oberen Experimentblock */
.experiment-title-image img {
  width: 160px;
  height: auto;
}
/* Einstellungen für den oberen Experimentblock, erklaerung */
.experiment-intro-text {
  margin-top: -6px; /* beeinflusst Postion Erklärungstext in Bezug zu Titelbild */
  padding-top: 0px;
  /* max-width: 640px; Breite so gewählt, dass er vor Experiment Nr. endet */
  max-width: none;
  flex: 1;
}
/* Einstellungen für den oberen Experimentblock, erklaerung, beeinflusst auch Exp-Nummer */
.experiment-title-row,
.experiment-intro {
  max-width: 980px;
}
/* Einstellungen für den oberen Experimentblock */
.experiment-intro-text .html-text {
  margin-top: 0;
  /* Bei Erklärung zu Exp. wäre wegen html kein linebreaks mehr mgl., mit white-space wird Linebreaks übernommen */
  /* Da bei Erklärung auch Linebreaks mit html Code gemacht wird, ist das mittlerweile unnötig. */
  /* Es würde nur zu zuviele Umbrüchen kommen */
  /* white-space: pre-line; */
}
/* Einstellungen für den oberen Experimentblock */
.experiment-intro-text .html-text p:first-child {
  margin-top: 0;
}
/* Einstellungen für den oberen Experimentblock, Detaillierte Experiment-Erklärung  */
.detail-pdf {
  margin-top: 12px;
  font-weight: 500;
}
/* Detaillierte Experiment-Erklärung  */
.detail-pdf a {
  font-weight: 500;
}
/* Einstellungen für den oberen Experimentblock */
/* Button in Warenkorb legen, bereits im Warenkorb, nicht buchbar */
.experiment-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  min-height: 28px;
}


/* ************************* */
/* Einstellungen für die Medien-Galerie: Bilder, PDFs, Videos (mp4, YouTube) */
/* ************************* */
/* Einstellungen für die Medien-Galerie, beeinflusst Abstand Bilder zur Überschrift */
 .bilder-section .media-grid {
  margin-top: -4px;
}
/* Einstellungen für die Medien-Galerie, beeinflusst Abstand Bilder zur Überschrift */
.bilder-section .media-thumb-box {
  height: 82px;
}
/* Einstellungen für die Medien-Galerie, hohe Bilder werden verkleinert */
.bilder-section .media-item img.thumb-image {
  max-height: 82px;
}
/* Einstellungen für die Medien-Galerie, beeinflusst Abstand Videos zur Überschrift */
 .video-section .media-grid {
  margin-top: -28px;
}
/* Einstellungen für die Medien-Galerie, beeinflusst Abstand Videos zur Überschrift */
.video-section .media-thumb-box {
  height: 82px;
}
/* Einstellungen für die Medien-Galerie, beeinflusst Abstand Videos zur Überschrift */
.video-section .media-item img.thumb-image {
  max-height: 82px;
}
/* Einstellungen für die Medien-Galerie */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 135px));
  column-gap: 18px;
  row-gap: 10px;
  align-items: start;
  margin-top: 4px;
}
/* Einstellungen für die Medien-Galerie */
.media-item {
  width: 135px;
  min-width: 0;
  margin: 0;
  text-align: left;
}
/* Einstellungen für die Medien-Galerie */
.media-thumb-box {
  width: 80px;
  height: 95px;
  display: flex;
  align-items: flex-end; /* gemeinsame Unterkante der Bilder */
  justify-content: flex-start;
}
/* Einstellungen für die Medien-Galerie */
.media-item img.thumb-image,
.media-item img.thumb-video {
  max-width: 80px;
  max-height: 95px;
  width: auto;
  height: auto;
  display: block;
  border-radius: 3px;
}
/* Einstellungen für die Medien-Galerie */
.media-item img.thumb-pdf {
  max-width: 80px;
  max-height: 95px;
  width: auto;
  height: auto;
  display: block;
  background: #fff;
  border-radius: 3px;
}
/* Einstellungen für die Medien-Galerie */
.media-caption {
  margin-top: 7px;
  font-size: 15px;
  line-height: 1.22;
  max-width: 135px;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}
/* Einstellungen für Dokumente und Medien */
.media-item a,
.document-item .pdf-card {
  display: block;
  text-decoration: none;
}
/* ************************* */
/* PDF-Thumbnails in der Dokumentenübersicht */
/* ************************* */

/* Fallback:
   Falls ein Browser kein CSS subgrid unterstützt, bleiben PDF-Thumbnails
   in einer festen Box unten ausgerichtet. Das ist ruhig, aber etwas weniger
   flexibel. */
.document-grid .media-thumb-box {
  height: 82px;
  align-items: flex-end;
}

/* Moderne Browser:
   Jede Dokument-Kachel spannt zwei Grid-Zeilen:
   1. Thumbnail-Zeile
   2. Beschriftungs-Zeile

   Dadurch richtet sich die Unterkante der Thumbnails pro Zeile ruhig aus.
   Das höchste PDF-Thumbnail der jeweiligen Zeile bestimmt die Thumbnail-Höhe.
*/
@supports (grid-template-rows: subgrid) {
  .document-grid {
    align-items: start;
    row-gap: 8px;
  }
  .document-grid .document-item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
  }
  .document-grid .pdf-card {
    align-self: end;
    justify-self: start;
    display: block;
  }
  .document-grid .media-thumb-box {
    height: auto;
    min-height: 0;
    align-items: flex-end;
  }
  .document-grid .media-caption {
    margin-top: 0;
  }
}
/* Button Zum Warenkorb  */
.experiment-actions .cart-link {
  display: inline-flex;
  align-items: center;
  height: 24px;
  font-size: 16px;
  margin-left: 0;
}
/* Einstellungen für Video-Thumbnail */
.video-thumb-box {
  position: relative;
  width: 80px;
}
/* Einstellungen für Video-Thumbnail */
.video-thumb-box::after {
  content: "▶";
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 13px;
  line-height: 24px;
  text-align: center;
  pointer-events: none;
}
/* Einstellungen für YouTube-Videos */
.youtube-video-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 10px;
  margin-bottom: 24px;
}
/* Einstellungen für YouTube-Videos */
.youtube-video-item {
  margin: 0;
}
/* Einstellungen für YouTube-Videos */
.youtube-embed {
  width: 620px;
  max-width: 100%;
  aspect-ratio: 16 / 9;
}
/* Einstellungen für YouTube-Videos */
.youtube-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
/* Einstellungen für YouTube-Videos */
.youtube-caption {
  max-width: 520px;
  margin-top: 7px;
}
/* Einstellungen für Personen */
.person-detail-page {
  margin-top: 23px;
}
/* Einstellungen für Personen */
.person-intro {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  margin-bottom: 28px;
  max-width: 980px;
}
/* Einstellungen für Personen */
.person-title-image {
  margin: 0;
  flex: 0 0 104px;
}
/* Einstellungen für Personen */
.person-title-image img {
  width: 104px;
  height: 160px;
  object-fit: cover;
  border-radius: 3px;
}
/* Einstellungen für Personen */
.person-intro-text {
  margin-top: -6px;
  flex: 1;
}
/* Einmaliger Login-Hinweis für geschützte Videos in Kapitel 13 */
.protected-video-login-hint {
  margin-top: 4px;
  margin-bottom: 18px;
  max-width: 650px;
  padding: 10px 12px;
  border: 1px solid #d8d8d8;
  background: #f7f7f7;
  color: #555;
  font-size: 15px;
  line-height: 1.35;
}
/* Link im Login-Hinweis */
.protected-video-login-hint a {
  font-weight: 500;
}
/* Einmaliger Nutzungshinweis für geschützte Videos nach Login */
.protected-video-usage-note {
  margin-top: 4px;
  margin-bottom: 18px;
  max-width: 650px;
  color: #666;
  font-size: 15px;
  line-height: 1.35;
}
/* Datenschutzhinweis unter eingebetteten YouTube-Videos */ 
.video-privacy-note {
  margin-top: -8px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  color: #666;
  line-height: 1.35;
  max-width: 650px;
}


/* ************************* */
/* Einheitlicher Kachel-Look */
/* ************************* */
.gallery img.gallery-thumb-experiment,
.gallery img.gallery-thumb-kapitel {
  width: 160px;
  height: 120px;
  object-fit: cover;
  display: block;
  background: #fff;
  border-radius: 3px;
}
/* Einheitlicher Kachel-Look für Personen */
.gallery img.gallery-thumb-person {
  width: 104px;
  height: 160px;
  object-fit: cover;
  display: block;
  background: #fff;
  border-radius: 3px;
}
/* Einheitlicher Kachel-Look */
.gallery a {
  color: inherit;
  text-decoration: none;
}
/* Einheitlicher Kachel-Look */
.gallery a:hover figcaption {
  text-decoration: underline;
}
/* Gallery für Titelbilder */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, 160px);
  grid-auto-rows: auto;
  justify-content: start;
  gap: 20px;  
}
/* Gallery für Titelbilder */
.gallery figure {
  position: relative;
  margin: 0;
}

.experiment-thumb {
  position: relative;
}
/* Gallery für Kapitel */
.gallery-kapitel {
  font-size: 17px; /* Kapitel-Kachel hat so Schriftgrösse wie in Sidebar */
}
/* Gallery für Unterkapitel */
.gallery-unterkapitel {
  font-size: 16px;
}
/* Gallery für Experimente */
.gallery-experimente {
  font-size: 16px; /* Exp-Kachel hat so Schriftgrösse wie in Sidebar */
}
/* Gallery für Personen */
.gallery-personen {
  font-size: 16px;
}
/* Einheitlicher Kachel-Look, Caption-Abstand */
.gallery figcaption {
  margin-top: 3px;
  line-height: 1.22;
}

/* Schriftgrösse bei Suchtreffern zu Dokumenten */
.document-hit {
  font-size: 16px;
}
/* ************************* */
/* Gestaltung Sidebar */
/* ************************* */
.sidebar a {
  color: #111;
  text-decoration: none;
}
/* hover-Highlighting */
.sidebar a:hover {
  color: #1a5fb4;
  text-decoration: underline;
  background: transparent;
}
/* Gestaltung Sidebar, Highlighting */
.sidebar .nav-active,
.sidebar a.nav-active {
  color: #1a5fb4;
  font-weight: 500;
  background: transparent;
}
/* Gestaltung Sidebar, Kapitel optisch trennen, Abstand zwischen Kapitelnamen */
.kapitel-item {
  margin-bottom: 4px;
}
/* Gestaltung Sidebar */
.kapitel-nav {
  list-style: none;
  padding-left: 0;
}
/* Gestaltung Sidebar, Unterkapitel */
.unterkapitel-nav {
  list-style: none;
  padding-left: 14px;
  font-size: 16px;
  line-height: 1.22;
}
/* Gestaltung Sidebar */
.unterkapitel-nav a {
  font-weight: normal;
}
/* Gestaltung Sidebar */
.unterkapitel-nav li {
  margin: 1px 0;
}
/* aktuelles Unterkapitel farblich markieren */
.unterkapitel-nav .nav-active {
  background: #eef3f7;
  padding: 2px 4px;
  border-radius: 3px;
}
/* Gestaltung Sidebar, Ebene Experimente */
.experiment-nav {
  list-style: none;
  padding-left: 15px;
  font-size: 16px;
  line-height: 1.32;
}
/* Gestaltung Sidebar, Ebene Experimente */
.experiment-nav a {
  font-size: 16px;
}
/* Gestaltung Sidebar */
.experiment-nav li {
  margin: 0;
}
/* Sorgt für den linken Einzug der Navigationspunkte bei Zeilenumbrüchen */
.kapitel-nav li,
.unterkapitel-nav li,
.experiment-nav li {
  padding-left: 0em;
  text-indent: -0.8em;
}

/* ************************* */
/* Haupt- und User-Navigation, oben weiterer css */
/* ************************* */
/* Für Header mit Exp, neue Exp, Personen */
/* Für kleinen Header mit Warenkorb, meine Res., meine Vorles., Hilfe */
.site-header {
  margin-bottom: 20px;
}
/* Hauptnavigation und Subnavigation und User-Navigation, rückt alle drei Bereiche ein*/
.main-nav,
.user-nav,
.sub-nav {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 20px;
}
/* Hauptnavigation und User-Navigation */
.main-nav,
.user-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
/* Hauptnavigation */
.main-nav a {
  color: #111;
  text-decoration: none;
}
/* Hauptnavigation */
.main-nav a:hover,
.main-nav a.main-nav-active {
  color: #1a5fb4;
  text-decoration: underline;
}
/* Hauptnavigation */
.main-nav {
  font-size: 20px;
  margin-bottom: 0.6rem;
}
/* Hauptnavigation, Suche */
.search-wrapper {
  margin-left: auto;
  position: relative;
  display: flex;
  align-items: center;
}
/* Hauptnavigation, Suche */
.search-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}
/* Hauptnavigation, Suche */
.search-toggle img {
  width: 18px;
  height: 18px;
  opacity: 0.9;
}
/* Hauptnavigation, Suche */
.search-form-hidden {
  display: none;
}
/* Hauptnavigation, Suche */
.search-form-visible {
  display: block;
  position: absolute;
  right: 0;
  top: 28px;
  z-index: 1000;
  background: white;
}
/* Hauptnavigation, Suche */
.search-form-visible input {
  width: 260px;
}
/* User-Navigation */
.user-nav {
    font-size: 18px;
    padding-top: 0.35rem;
    border-top: 1px solid #ddd;
}
/* User-Navigation, Farbe */
.user-nav a {
    color: #444;
    text-decoration: none;
}
/* User-Navigation */
.user-nav a:hover {
    text-decoration: underline;
}

/* Aktives Element optisch hervorheben */
.nav-active {
  font-weight: 500;
  color: #000;
}
/* aktives Experiment optisch hervorheben */
.nav-active,
.experiment-nav .nav-active {
  background: #f0f4f8;
  font-weight: 200;
  padding: 2px 4px;
  border-radius: 3px;
}


/* ************************* */
/* Sprachauswahl Dropdown via Select */
/* ************************* */
.language-select {
  background: #1f1f1f;
  color: #fff;
  border: 1px solid #111;
  border-radius: 4px;
  font: inherit;
  cursor: pointer;
  padding: 2px 18px 2px 6px;
}
/* Sprachauswahl Dropdown */
.language-select option {
  color: #111;
  background: #fff;
}


/* Trennstrich vor Kapitel-Namen und Unterkapitel-Namen */
.nav-dash {
  margin-right: 4px;   /* kleiner als normales Leerzeichen */
  color: #555;
}

/* Rückt nicht Experimenteblock aber UK Kacheln */
/* und Kapitel-Kacheln etwas nach unten/oben */
.content main {
  margin-top: -15px;
  padding-top: 0px;
}




/* ************************* */
/* Badge für neue und revidierte Experimente */
/* ************************* */
.title-image-badge,
.badge-neu,
.badge-revidiert {
  position: absolute;
  top: 6px;
  left: 6px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 20px;
  /* min-width: 118px;   ggf. feinjustieren */
  padding: 3px 6px;
  box-sizing: border-box;

  color: #fff;
  font-family: "DIN Next", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;

  border-radius: 4px;
}
/* Badge für neue und revidierte Experimente */
.title-image-badge.neu,
.badge-neu {
  background: rgba(217, 83, 79, 0.70);
}
/* Badge für neue und revidierte Experimente */
.title-image-badge.revidiert,
.badge-revidiert {
  background: rgba(240, 173, 78, 0.75);
}

/* Titel-Bild-Wrapper */
.title-image-wrap {
  position: relative;
  display: inline-block;
}
/* Titel-Bild-Wrapper */
.title-image-wrap img {
  border-radius: 3px;
}
/* Titel-Bild-Wrapper */
.title-image-badge {
  position: absolute;
  top: 6px;
  left: 6px;
}

/* Basis für einheitlichen Kachel-Look */
:root {
  --thumb-shadow: 3px 3px 8px -3px #bbb;
}
/* Einheitlicher Kachel-Look für Übersichten, Suche etc. */
.experiment-title-image img,
.person-title-image img,
.gallery img.gallery-thumb-experiment,
.gallery img.gallery-thumb-kapitel,
.gallery img.gallery-thumb-person,
.media-item img.thumb-image,
.media-item img.thumb-video,
.media-item img.thumb-pdf {
  box-shadow: var(--thumb-shadow);
}
/* Einheitlicher Badge-Look */
.title-image-badge,
.badge-neu,
.badge-revidiert {
  position: absolute;
  top: 6px;
  left: 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 4px;
  line-height: 1.2;
  box-sizing: border-box;
}

/* Einstellungen für Personenthumbnails, da Personen meistens hochkant sind */
.bilder-section .media-item img.thumb-person-detail {
  max-width: 95px;
  max-height: 123px; /* sollte 80px 123px sein, aber neuere Bilder nur noch 113px*/
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 3px;
  box-shadow: var(--thumb-shadow);
}
/* Extra Thumb-Box für Personenthumbnails, da Personen meistens hochkant sind */
.bilder-section .media-thumb-box:has(img.thumb-person-detail) {
  width: 95px;
  height: 123px; /* sollte 80px 123px sein, aber neuere Bilder nur noch 113px*/
}
/* Hinweistext zu Anzahl Personen */
.hint-text {
    margin: 4px 0 18px 0;
    font-size: 0.95rem;
    color: #666;
}


/* ************************* */
/* Flexible Bild-Thumbnails in Experiment- und Persondetailseiten */
/* ************************* */

/* Moderne Browser:
   Jede Bild-Kachel spannt zwei Grid-Zeilen:
   1. Thumbnail-Zeile
   2. Beschriftungs-Zeile

   Dadurch richtet sich die Unterkante der Thumbnails pro Zeile ruhig aus.
   Das höchste Bild-Thumbnail der jeweiligen Zeile bestimmt die Thumbnail-Höhe.
   Wenn alle Thumbnails einer Zeile flach sind, rückt die Zeile näher zur Überschrift.
*/
@supports (grid-template-rows: subgrid) {
  .bilder-section .image-grid {
    align-items: start;
    row-gap: 8px;
  }

  .bilder-section .image-grid .media-item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
  }

  .bilder-section .image-grid .media-item > a {
    grid-row: 1;
    align-self: end;
    justify-self: start;
    display: block;
  }

  .bilder-section .image-grid .media-caption {
    grid-row: 2;
    margin-top: 0;
  }

  .bilder-section .image-grid .media-thumb-box,
  .bilder-section .image-grid .media-thumb-box:has(img.thumb-person-detail) {
    height: auto;
    min-height: 0;
    align-items: flex-end;
  }
}

/* ************************* */
/* Einstellungen für "Meine Vorlesungen" */
/* ************************* */
.course-actions {
    margin-bottom: 1rem;
}
/* Einstellungen für "Meine Vorlesungen" */
.course-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 820px;
}
/* Einstellungen für "Meine Vorlesungen" */
.course-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fff;
}
/* Einstellungen für "Meine Vorlesungen" */
.course-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}
/* Einstellungen für "Meine Vorlesungen" */
.course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    color: #555;
    font-size: 0.96rem;
}
/* Einstellungen für "Meine Vorlesungen" */
.course-card-actions {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 110px;
    align-items: flex-end;
}
/* Einstellungen für "Meine Vorlesungen" */
.btn-danger-link {
    color: #8a1f1f;
}
/* Einstellungen für "Meine Vorlesungen" */
.empty-box {
    color: #666;
    font-style: italic;
}
/* Einstellungen für "Meine Vorlesungen" */
@media (max-width: 720px) {
    .course-card {
        flex-direction: column;
    }

    .course-card-actions {
        align-items: flex-start;
        min-width: 0;
    }
}
/* Einstellungen für "Meine Vorlesungen", Button "Neue Vorlesung" */
.btn-auto {
  width: auto;
  min-width: 0;
  padding: 0 18px;
}


/* ************************* */
/* Einstellungen fürs Anlegen von Vorlesungen */
/* ************************* */
.course-form {
  max-width: 620px;
}
/* Einstellungen fürs Anlegen von Vorlesungen */
.form-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
/* Einstellungen fürs Anlegen von Vorlesungen */
.form-row label {
  text-align: right;
  font-weight: 500;
}
/* Einstellungen fürs Anlegen von Vorlesungen */
.form-field input,
.form-field select {
  font: inherit;
  padding: 3px 6px;
  min-width: 190px;
}
/* Einstellungen fürs Anlegen von Vorlesungen */
.form-actions {
  margin-top: 18px;
  margin-left: 202px;
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Einstellungen fürs Anlegen von Vorlesungen */
.form-error {
  margin-top: 4px;
  color: #8a1f1f;
  font-size: 0.9rem;
}


/* ************************* */
/* Gemeinsame Einstellungen für "Meine Experimente" (Historie) */
/* und für Warenkorb */
/* ************************* */
.experiment-card,
.cart-experiment-card {
  width: 160px;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 6px; /* Abstand Bild → Titel → Buttons, Pirvat-PC 0px */
}
/* Gemeinsame Einstellungen Historie und Warenkorb */
.experiment-card figure,
.cart-experiment-card figure {
  margin: 0;
  display: contents;
}
/* Leichte Vergrösserung / Schatten / Klickfeedback; zu viel bei uns */
/* .experiment-card img,
.cart-experiment-card img {
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
} */
/* Leichte Vergrösserung / Schatten / Klickfeedback; zu viel bei uns */
/* .experiment-card a:hover img,
.cart-experiment-card a:hover img {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
} */
/* Gemeinsame Einstellungen Historie und Warenkorb */
.experiment-card figure > a,
.cart-experiment-card figure > a {
  display: contents;
}
/* Gemeinsame Einstellungen Historie und Warenkorb */
.history-thumb {
  grid-row: 1;
  width: 160px;
  height: 120px;
  min-width: 160px;
  min-height: 120px;
  max-width: 160px;
  max-height: 120px;
  object-fit: cover;
  display: block;
  border-radius: 3px;
  box-shadow: var(--thumb-shadow);
}
/* Gemeinsame Einstellungen Historie und Warenkorb */
.experiment-card figcaption,
.cart-experiment-card figcaption {
  grid-row: 2;
  margin-top: 4px;  /* Abstand Bild → Titel → Buttons */
  font-size: 15px;
  line-height: 1.22; /* steuert den tatsächlichen Zeilenabstand */
  min-height: 1.22em; /* verhindert, dass Firefox die Zeile zu klein berechnet. */
}
/* Gemeinsame Einstellungen Historie und Warenkorb */
.history-card-actions,
.cart-experiment-card .card-actions {
  grid-row: 3;
  margin-top: 6px; /* Abstand Titel → Buttons, Pirvat-PC 4px */
  display: flex;
  flex-direction: column;
  gap: 4px;
}


/* ************************* */
/* Einstellungen für "Meine Experimente" (Historie) */
/* ************************* */
/* Abstand zwischen Experimenten, die am selben Tag reserviert wurden, */
/* und Experimenten von anderen Tagen */
.reservation-block {
  border-bottom: 1px solid #bdbdbd;
  padding-bottom: 7px; 
  margin-bottom: 18px;
}
/* Einstellungen für "Meine Experimente" (Historie) */
.reservation-block .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, 160px);
  column-gap: 24px; /* Abstand zwischen den Experimenten */
  row-gap: 22px;   /* Abstand zwischen Karten-Zeilen */
  align-items: start;
}
/* Einstellungen für "Meine Experimente" (Historie) */
.history-card-actions .remove-link {
  align-self: flex-start;
}
/* Einstellungen für "Meine Experimente" (Historie), macht Buttons gleich groß */
.history-card-actions .history-btn {
  min-height: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
  text-align: center;
  padding: 0 10px;
}
/* Einstellungen für "Meine Experimente" (Historie) */
.history-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  min-height: 24px;
  margin-top: 7px;
  padding: 2px 8px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 0;
  color: #fff !important;
}
/* Einstellungen für "Meine Experimente" (Historie) */
.history-btn-primary {
  background: #0069b4;
}
/* Einstellungen für "Meine Experimente" (Historie) */
.history-btn-primary:hover {
  background: #00508a;
  text-decoration: none;
}
/* Einstellungen für "Meine Experimente" (Historie) */
.history-btn-disabled {
  background: #999;
  cursor: default;
}
/* Einstellungen für "Meine Experimente" (Historie) */
.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 25px;
  margin-left: 5px;
}
/* Einstellungen für "Meine Experimente" (Historie) */
.icon-btn:hover {
  transform: scale(1.15);
}
/* Einstellungen für "Meine Experimente" (Historie), Farbe Entfernen Button */
.remove-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 14px;
  color: #0069b4;
  text-decoration: none;
}
/* Einstellungen für "Meine Experimente" (Historie), Farbe Entfernen Button */
.remove-link:hover {
  color: #00508a;
  text-decoration: underline;
}
/* Einstellungen für "Meine Experimente" (Historie), Datumsüberschrift */
.reservation-block h3 {
  font-size: 14px;
  font-weight: 600;
  color: #444;
}
/* Einstellungen für "Meine Experimente" (Historie), Farbe disabled Buttons */
.history-btn-disabled {
  background: #9a9a9a;
  color: #f4f4f4 !important;
}
/* Einstellungen für "Meine Experimente" (Historie), Farbe Entfernen Button */
.experiment-card a.remove-link,
.experiment-card a.remove-link:visited {
  color: #0069b4 !important;
  text-decoration: none;
}
/* Einstellungen für "Meine Experimente" (Historie), Farbe Entfernen Button */
.experiment-card a.remove-link:hover {
  color: #00508a !important;
  text-decoration: underline;
}


/* ************************* */
/* Einstellungen für Warenkorb */
/* ************************* */
/* Warenkorb, Hauptlayout, Bereich neben Kalender mit Experimenten */
.cart-top-layout {
  display: grid;
  grid-template-columns: 360px minmax(220px, 1fr);
  gap: 14px; /* Abstand zwischen Kalender und Bereich mit Experimenten */
  align-items: start;
}
/* Einstellungen für Warenkorb */
.cart-panel,
.cart-items-panel,
.planned-cart {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 1rem 1.2rem;
  min-width: 220px;
}
/* Einstellungen für Warenkorb, Abstand zwischen Warenkorb und Abschnitt "Meine geplanten Warenkörbe" */
.planned-cart {
  margin-top: 26px;
  margin-bottom: 26px;
  padding: 1rem 1.2rem;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
/* Einstellungen für Warenkorb, Abstand zwischen mehreren geplanten Warenkörben */
.planned-cart + .planned-cart {
  margin-top: 32px;
}
/* Einstellungen für Warenkorb, Formular */
.planned-cart form {
  margin-top: 18px;
}
/* Einstellungen für Warenkorb, Formularreihen */
.planned-cart .form-row {
  display: block;
  margin-bottom: 0.6rem;
}
/* Einstellungen für Warenkorb, Formular-Labels */
.planned-cart .form-row label {
  display: block;
  text-align: left;
  margin-bottom: 0.35rem;
  font-weight: 600;
}
/* Einstellungen für Warenkorb, Kommentarfeld */
.planned-comment-box {
  width: 100%;
  max-width: 520px;
  min-height: 4.5rem;
  box-sizing: border-box;
}
/* Einstellungen für Warenkorb, Kommentarhilfe */
.planned-comment-help {
  margin-top: 0.35rem;
  margin-bottom: 0.75rem;
  font-size: 0.92rem;
  color: #666;
  max-width: 520px;
}
/* Einstellungen für Warenkorb */
.cart-panel h3,
.cart-items-panel h3,
.planned-cart h3 {
  margin-top: 0;
}
/* Einstellungen für Warenkorb */
.comment-box {
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
}
/* Einstellungen für Warenkorb */
.planned-comment-box {
  max-width: 520px;
  min-height: 4.5rem;
}
/* Einstellungen für Warenkorb */
.planned-comment-help {
  margin-top: 0.35rem;
  margin-bottom: 0.75rem;
  font-size: 0.92rem;
  color: #666;
  max-width: 520px;
}
/* Einstellungen für Warenkorb */
.form-actions-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 0.75rem;
}
/* Einstellungen für Warenkorb */
.form-actions-row .form-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
/* Einstellungen für Warenkorb, Aktionsbuttons Reservieren, Vormerken */
.form-actions-row button {
  width: 170px;
  min-height: 34px;
  padding: 4px 8px;
  line-height: 1.2;
  font-size: 14px;
}
/* Einstellungen für Warenkorb */
.action-help-side {
  align-self: center;
}
/* Einstellungen für Warenkorb */
@media (max-width: 1020px) {
  .cart-top-layout {
    grid-template-columns: 1fr;
  }
}
/* Einstellungen für Warenkorb, Tooltip */
.action-help {
  position: relative;
  display: inline-block;
}
/* Einstellungen für Warenkorb */
.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: #e9eef5;
  color: #234;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: help;
  border: 1px solid #b9c7d8;
  line-height: 1;
}
/* Einstellungen für Warenkorb, Tooltip */
.help-tooltip {
  display: none;
  position: absolute;
  left: 1.8rem;
  top: -0.2rem;
  width: 320px;
  padding: 0.75rem 0.9rem;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  z-index: 20;
  font-size: 0.92rem;
  line-height: 1.35;
}
/* Einstellungen für Warenkorb, Tooltip */
.action-help:hover .help-tooltip,
.action-help:focus-within .help-tooltip {
  display: block;
}
/* Einstellungen für Warenkorb */
.cart-items-panel,
.planned-cart {
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
}
/* Einstellungen für Warenkorb, Box um Experimente im Warenkorb */
.cart-items-panel-top {
  width: min(100%, 608px);
  min-width: 220px;
  box-sizing: border-box;
}
/* Einstellungen für Warenkorb, Box um Experimente im Warenkorb */
.cart-items-panel-top .cart-gallery {
  grid-template-columns: repeat(auto-fit, 160px);
}
/* Einstellungen für Warenkorb, Box um vorgemerkte Experimente */
.cart-cols-1 { width: 200px; }
.cart-cols-2 { width: 390px; }  /* 1×190 + 200 */
.cart-cols-3 { width: 580px; }  /* 2×190 + 200 */
.cart-cols-4 { width: 770px; }  /* 3×190 + 200 */
.cart-cols-5 { width: 960px; }  /* 4×190 + 200 */

.cart-items-panel {
  max-width: 608px;   /* oben neben Kalender maximal 3 Spalten */
}
/* Einstellungen für Warenkorb */
.planned-cart {
  min-width: 220px;
  max-width: 100%;
}
/* Einstellungen für Warenkorb, Button "Jetzt reservieren" */
.planned-cart .form-actions {
  margin-left: 0;
  justify-content: flex-start;
}
/* Einstellungen für Warenkorb, Button "Jetzt reservieren" */
.planned-cart .form-actions button {
  width: auto;
  min-width: 130px;
  padding: 3px 10px;
}
/* Einstellungen für Warenkorb, Kalender */
.cart-panel .flatpickr-calendar {
  transform-origin: top left;
}
/* Einstellungen für Warenkorb, Kommentarbox*/
.reservation-cart-form .comment-box {
  width: 310px;
  max-width: 310px;
  min-height: 6.5rem;
}
/* Einstellungen für Warenkorb, Kalender */
.reservation-cart-form .form-row {
  display: block;
  margin-bottom: 1rem;
}
/* Einstellungen für Warenkorb, Kalender */
.reservation-cart-form label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
  text-align: left;
}
/* Einstellungen für Warenkorb, Kalender */
.calendar-container {
  margin-top: 20px;
}
/* Einstellungen für Warenkorb, Kalender */
#kalender {
  /* margin-top: 15px; */
  margin-top: 0;
}
/* Ev. Einstellungen für Warenkorb */
button.btn {
  margin-top: 0;
}
/* Einstellungen für Warenkorb */
.cart-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, 160px);
  column-gap: 24px;
  row-gap: 22px;
  align-items: start;
}
/* Einstellungen für Warenkorb, Thumbnail */
.cart-experiment-card .history-thumb {
  grid-row: 1;
  width: 160px;
  height: 120px;
  object-fit: cover;
  display: block;
  border-radius: 3px;
  box-shadow: var(--thumb-shadow);
}
/* Einstellungen für Warenkorb */
.cart-experiment-card .history-btn {
  width: 160px;
  height: 32px; /* ev. 30px */
  min-height: 32px; /* ev. 30px */
}
/* Einstellungen für Warenkorb, Farbe Entfernen Button */
.cart-experiment-card .remove-link,
.cart-experiment-card .remove-link:visited {
  color: #0069b4 !important;
  text-decoration: none;
}
/* Einstellungen für Warenkorb, Farbe Entfernen Button */
.cart-experiment-card .remove-link:hover {
  color: #00508a !important;
  text-decoration: underline;
}

/* Kalender, Tage mit Reservierung hervorheben */
.flatpickr-day.has-reservation {
  position: relative;
  border-color: #0069b4;
  font-weight: 600;
}
/* Kalender, Punkte für reservierte Tage */
.flatpickr-day.has-reservation::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 5px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #0069b4;
}
/* Kalender, eigener Tooltip mit Liste der reservierten Experimente */
.reservation-calendar-tooltip {
  display: none;
  position: absolute;
  transform: translate(-50%, -100%);
  min-width: 260px;
  max-width: min(360px, calc(100vw - 24px));
  overflow-wrap: break-word;
  padding: 10px 12px;

  background: rgba(40, 40, 40, 0.96);
  color: white;
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);

  font-size: 13px;
  line-height: 1.4;
  font-weight: normal;

  z-index: 99999;
  pointer-events: none;
}
/* Kalender, Tooltip sichtbar bei Hover über Tag mit Reservierung */
.reservation-calendar-tooltip strong {
  color: white;
  font-weight: 600;
}


/* Papierkorbsymbol vor Entfernen */
.btn-danger::before {
    content: "🗑 ";
}

/* Abschnitt hier, um message.tags des views anzuzeigen, */ 
/* also Nachrichten wie Experiment im Warenkorb etc. */
.messages {
    position: fixed;
    top: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;

    max-width: 520px;
    width: 90%;

    list-style: none;
    padding: 0;
    margin: 0;
}

/* einzelne Nachricht */
.messages li,
.message {
    padding: 0.9rem 1.2rem;
    border-radius: 10px;

    box-shadow: 0 10px 25px rgba(0,0,0,0.18);

    font-size: 1.05rem;
    line-height: 1.35;

    animation: fadeInOnly 0.2s ease-out;
}

/* leichte Animation, Meldung erscheint mittig und blendet ein und aus */
@keyframes fadeInOnly {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.message.success {
    background: #edf8ed;
    border-color: #b8d8b8;
    color: #1f5e1f;
}

.message.info {
    background: #eef4fb;
    border-color: #b7cce6;
    color: #204a73;
}

.message.error,
.message.warning {
    background: #fdeaea;
    border-color: #e2a8a8;
    color: #8a1f1f;
}


/* ************************* */
/* Footer */
/* ************************* */
.site-footer {
  margin-top: 80px;
  background: #1f1f1f;
  color: #fff;
}
/* Footer */
.footer-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 48px 20px 32px 20px;
}
/* Footer */
.footer-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-bottom: 48px;
}
/* Footer */
.site-footer h2 {
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 16px 0;
  border: 0;
  padding: 0;
}
/* Footer, Suche */
.footer-search form {
  display: flex;
  width: 280px;
  background: #fff;
  border: 2px solid transparent;
}
/* Footer, Suche */
.footer-search form:focus-within {
  border-color: #1a5fb4;
}
/* Footer, Suche */
.footer-search input {
  flex: 1;
  border: 0;
  padding: 8px 10px;
  font: inherit;
  outline: none;
}
/* Footer, Suche */
.footer-search button {
  width: 42px;
  border: 0;
  background: #fff;
  cursor: pointer;
  outline: none;
  font-size: 18px;
}
/* Footer, Suche */
.footer-search-icon {
  width: 18px;
  height: 18px;
  display: block;
  margin: 0 auto;
}
/* Footer */
.footer-contact p {
  margin: 0 0 14px 0;
  line-height: 1.35;
}
/* Footer */
.site-footer a {
  color: #fff;
  text-decoration: none;
}
/* Footer */
.site-footer a:hover {
  text-decoration: underline;
}
/* Footer */
.footer-links {
  border-top: 1px solid #777;
  padding-top: 18px;
  display: flex;
  gap: 80px;
  font-size: 14px;
}
/* Footer */
.footer-copy {
  margin-top: 28px;
  font-size: 14px;
  font-weight: 500;
}
/* Footer, für Suchfeld */
.search-btn {
  width: 42px;
  border: 0;
  background: #fff;
  cursor: pointer;
  position: relative;
}
/* Footer, Symbole für Mail und Telefon */
/* Icons sind nicht Unicode, sondern werden als Bilder geladen */
.icon-mail,
.icon-phone {
  display: inline-block;
  width: 16px;
  margin-right: 8px;
  color: #fff;
  text-align: center;
}
/* Footer, Symbol für Telefon */
.icon-phone {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
}
/* Footer, Symbol für Telefon */
.icon-phone img {
  width: 14px;
  height: 14px;
  display: block;
}


/* ************************* */
/* Responsive Design 1020px*/
/* ************************* */
@media (max-width: 1020px) {
  /* Responsive Design, Position Tooltip Fragezeichen Reservations-Kalender */
  .action-help {
    position: static;
  }
  /* Responsive Design, Position Tooltip Fragezeichen Reservations-Kalender */
  .help-tooltip {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 24px;
    top: auto;
    width: auto;
    max-width: none;
    transform: none;
    z-index: 99999;
  }
  /* Responsive Design, Position Tooltip Fragezeichen Reservations-Kalender */
  .action-help-side {
    align-self: flex-start;
  }
  /* Responsive Design, Kurs-Anlegen */
  .course-form {
    max-width: none;
  }
  /* Responsive Design, Kurs-Anlegen */
  .course-form .form-row {
    display: block;
  }
  /* Responsive Design, Kurs-Anlegen */
  .course-form .form-row label {
    display: block;
    text-align: left;
    margin-bottom: 4px;
  }
  /* Responsive Design, Kurs-Anlegen */
  .course-form .form-field input,
  .course-form .form-field select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Responsive Design, Kurs-Anlegen */
  .course-form .form-actions {
    margin-left: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }
  /* Responsive Design, Kurs-Anlegen */
  .course-form .btn-auto {
    width: auto;
    min-width: 220px;
    height: auto;
    min-height: 34px;
    padding: 5px 14px;
    white-space: normal;
  }
}
/* ************************* */
/* Responsive Design 900px*/
/* ************************* */
@media (max-width: 900px) {
  .layout {
    display: block;
  }
  /* Responsive Design */
  .sidebar {
    width: auto;
    margin-bottom: 28px;
  }
  /* Responsive Design */
  .content {
    width: auto;
  }
  /* Responsive Design */
  .eth-header-inner {
    padding: 36px 20px 32px 20px;
    gap: 36px;
  }
  /* Responsive Design */
  .eth-title a {
    font-size: 21px;
  }
  /* Responsive Design */
  .main-nav,
  .user-nav {
    gap: 0.7rem;
  }
  /* Responsive Design Login */
  .login-panel {
    scroll-margin-top: 24px;
  }
  /* Responsive Design, Reservations-Button auf Exp-Detailseite */
  .experiment-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  /* Responsive Design, Reservations-Button auf Exp-Detailseite */
  .experiment-actions .btn {
    width: 100%;
    max-width: 268px;
    height: auto;
    min-height: 34px;
    line-height: 1.15;
    padding: 5px 10px;
    white-space: normal;
  }
}
/* ************************* */
/* Responsive Design für kleine Bildschirme, 620px */
/* ************************* */
@media (max-width: 620px) {
  body {
    font-size: 16px;
  }
  /* Responsive Design für kleine Bildschirme */
  .eth-header-inner {
    flex-direction: column;
    gap: 14px;
    padding: 28px 16px 24px 16px;
  }
  /* Responsive Design für kleine Bildschirme */
  .eth-title {
    transform: none;
  }
  /* Responsive Design für kleine Bildschirme */
  .layout,
  .main-nav,
  .user-nav,
  .eth-meta-inner,
  .footer-inner {
    padding-left: 14px;
    padding-right: 14px;
  }
  /* Responsive Design für kleine Bildschirme */
  .person-intro,
  .experiment-intro {
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
  }
  /* Responsive Design für kleine Bildschirme */
  .experiment-title-image {
    flex: 0 0 160px;
  }
  /* Responsive Design für kleine Bildschirme */
  .experiment-title-image img {
    width: 160px;
  }
  /* Responsive Design für kleine Bildschirme */
  .experiment-intro-text {
    margin-top: 0;
    flex: 1;
    min-width: 0;
  }
  /* Responsive Design für kleine Bildschirme */
  .experiment-title-row {
    flex-direction: column;
    gap: 4px;
  }
  /* Responsive Design für kleine Bildschirme */
  .footer-main {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  /* Responsive Design für kleine Bildschirme */
  .footer-links {
    flex-direction: column;
    gap: 12px;
  }
}