/* ==========================================================================
   Open Power System Data -- gesamtes Styling der Site.

   Farben und Schrift folgen der alten WordPress-Site (Blau #2980b9,
   Text #464646, Open Sans). Der Unterbau ist neu: Custom Properties,
   Flexbox/Grid, selbst gehostete Schrift, kein jQuery.

   Umbruchpunkte:  760px  Spalten fallen auf eine
                   940px  Navigation wird zum Burger-Menue
   ========================================================================== */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/open-sans-variable.b68160.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/open-sans-italic-variable.b3e5bd.woff2') format('woff2');
}

:root {
  --blau: #2980b9;
  --blau-hell: #2991d6;
  --blau-dunkel: #2275ac;
  --text: #464646;
  --text-leise: #747474;
  --linie: #e2e2e2;
  --linie-stark: #d6d6d6;
  --flaeche: #f7f7f7;
  --flaeche-leise: #fbfbfb;
  --breite: 1140px;
  --spalte: 48px;          /* Spaltenabstand im Raster */
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Open Sans', -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text);
  background: #fff;
}

.wrap {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 8px; top: 8px;
  z-index: 100;
  padding: 8px 14px;
  background: #fff;
  border: 2px solid var(--blau);
}

/* --------------------------------------------------------------- Typografie */

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-weight: 300;
  line-height: 1.25;
  color: #2c2c2c;
}
h1 { font-size: 2.125rem; margin-bottom: .7em; }
h2 { font-size: 1.5rem; margin-top: 2em; }
h3 { font-size: 1.1875rem; font-weight: 600; margin-top: 1.8em; }
h4 { font-size: 1rem; font-weight: 600; margin-top: 1.6em; }
/* Erste Ueberschrift eines Abschnitts nicht zusaetzlich abstaenden */
h2:first-child, h3:first-child, h4:first-child { margin-top: 0; }

p { margin: 0 0 1.1em; }

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

h1 a, h2 a, h3 a { color: inherit; }
h1 a:hover, h2 a:hover, h3 a:hover { color: var(--blau); text-decoration: none; }

strong { font-weight: 600; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.4em; }
li { margin-bottom: .3em; }
li > ul, li > ol { margin: .3em 0 .4em; }

hr {
  height: 0;
  margin: 2.5em 0;
  border: 0;
  border-top: 1px solid var(--linie);
}
hr.blank { border: 0; margin: 1.5em 0; }

img { max-width: 100%; height: auto; }

code, pre {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: .9375em;
}

.lead { font-size: 1.0625rem; color: var(--text-leise); }
.meta { font-size: .875rem; color: var(--text-leise); }

/* ------------------------------------------------------------------- Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--linie);
}

/* stretch statt center: die Menuepunkte sollen die ganze Leistenhoehe
   ausfuellen. Sonst endet der Menuepunkt 13px ueber der Leistenkante und das
   Untermenue klappt mitten in die Leiste hinein auf. */
.header-inner {
  display: flex;
  align-items: stretch;
  gap: 24px;
  min-height: 72px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  color: var(--text);
}
.logo:hover { text-decoration: none; }
.logo img { display: block; width: 53px; height: 44px; }
.logo-text {
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.2;
  max-width: 9em;
}

/* --------------------------------------------------------------- Navigation */

/* flex, damit die Liste die Hoehe der Leiste erbt -- davon haengt ab, wo
   die Untermenues aufklappen (siehe .header-inner) */
.main-nav {
  display: flex;
  margin-left: auto;
}

.menu {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Bezugsrahmen der Untermenues: ohne das positionieren sie sich am Header,
   der die ganze Fensterbreite einnimmt -- rechte Punkte landeten dann am
   Bildschirmrand statt unter ihrem Menuepunkt. */
.menu > li { margin: 0; position: relative; }

.menu-item > a,
.menu-item > span {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 12px;
  font-size: .9375rem;
  color: var(--text);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.menu-item > a:hover,
.menu-item > span:hover,
.menu-item > a:focus-visible,
.menu-item > span:focus-visible {
  color: var(--blau);
  text-decoration: none;
}
.menu-item.current > a,
.menu-item.current > span { border-bottom-color: var(--blau); }

.submenu {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 60;
  min-width: 240px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--linie);
  border-top: 2px solid var(--blau);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .12s, transform .12s, visibility .12s;
}
.menu-item:hover > .submenu,
.menu-item:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.submenu li { margin: 0; }
.submenu a {
  display: block;
  padding: 7px 16px;
  font-size: .9375rem;
  color: var(--text);
  line-height: 1.4;
}
.submenu a:hover, .submenu a:focus-visible {
  color: var(--blau);
  background: var(--flaeche);
  text-decoration: none;
}
/* Die Leiste sitzt rechts, hinter den letzten zwei Punkten ist zu wenig
   Platz fuer ein 240px breites Panel (Workshops 204px, Contact 102px bis
   zum Rand des Inhalts). Diese beiden richten sich an ihrer rechten Kante
   aus, alle anderen an ihrer linken. */
.menu > li:nth-last-child(-n+2) .submenu { left: auto; right: 0; }

.nav-toggle {
  display: none;
  align-self: center;
  margin-left: auto;
  padding: 10px 8px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px 0;
  background: var(--text);
}

/* ------------------------------------------------------------------ Inhalt */

.content {
  padding-top: 40px;
  padding-bottom: 64px;
}

/* Fliesstextseiten ohne eigenes Spaltenraster: Zeilenlaenge begrenzen.
   Gesetzt ueber "breite: schmal" im Front Matter der Seite. */
.content.schmal { max-width: 900px; }

/* Raster: .row + .col-* (Zwoelftel), Umbruch auf eine Spalte bei 760px */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--spalte);
}
.row > * { flex: 1 1 100%; min-width: 0; }

.col-3 { flex-basis: calc((100% - 3 * var(--spalte)) / 4); }
.col-4 { flex-basis: calc((100% - 2 * var(--spalte)) / 3); }
.col-6 { flex-basis: calc((100% - var(--spalte)) / 2); }
.col-8 { flex-basis: calc((100% - 3 * var(--spalte)) / 4 * 2 + var(--spalte)); }
.col-9 { flex-basis: calc((100% - 3 * var(--spalte)) / 4 * 3 + 2 * var(--spalte)); }

/* Hero der Startseite. Das Bild traegt Titel und Claim als Pixel; die h1
   liegt fuer Vorleseprogramme und Suchmaschinen daneben und ist visuell
   ausgeblendet. Unter 620px ist die Bildschrift zu klein -- dort
   verschwindet das Bild und die h1 wird zur sichtbaren Ueberschrift. */
.hero { margin: 0 0 32px; }
.hero img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--linie);
}
.hero h1 {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

@media (max-width: 620px) {
  .hero img { display: none; }
  .hero h1 {
    position: static;
    width: auto; height: auto;
    margin: 0 0 .6em; padding: 0;
    overflow: visible;
    clip-path: none;
  }
  .hero-claim {
    display: block;
    margin-top: .3em;
    font-size: 1.0625rem;
    color: var(--text-leise);
  }
}

/* Data-Plattform im iFrame. Feste Hoehe, weil die Plattform in der
   Sandbox keine Hoehe zurueckmelden kann (fremde Origin). */
.data-frame {
  margin: 0 0 40px;
  border: 1px solid var(--linie-stark);
}
.data-frame iframe {
  display: block;
  width: 100%;
  height: 560px;
  border: 0;
}
.data-frame-note {
  margin: 0;
  padding: 8px 14px;
  font-size: .875rem;
  color: var(--text-leise);
  background: var(--flaeche-leise);
  border-top: 1px solid var(--linie);
}

/* Partnerlogos */
.partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 48px;
  margin: 0 0 1.5em;
  padding: 0;
  list-style: none;
}
.partners li { margin: 0; }
.partners img {
  display: block;
  width: auto;
  height: 30px;
  filter: grayscale(1);
  opacity: .8;
  transition: filter .15s, opacity .15s;
}
.partners a:hover img { filter: none; opacity: 1; }
/* Das BMWi-Logo ist hoch, nicht breit -- sonst wirkt es winzig */
.partners img.tall { height: 56px; }

/* Verweiskasten (z.B. "weiter zur Datenplattform") */
.callout {
  margin: 0 0 1.5em;
  padding: 18px 22px;
  background: var(--flaeche-leise);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--blau);
}
.callout > :last-child { margin-bottom: 0; }

.button {
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  background: var(--blau);
  border-radius: 2px;
  font-size: .9375rem;
}
.button:hover, .button:focus-visible {
  color: #fff;
  background: var(--blau-dunkel);
  text-decoration: none;
}

/* Aufzaehlung ohne Punkte, z.B. Teilnehmerlisten und Publikationen */
.plain { list-style: none; padding-left: 0; }
.plain > li { margin-bottom: .15em; }

/* Publikationsliste: haengender Einzug wie in Literaturverzeichnissen */
.refs { list-style: none; padding-left: 0; }
.refs > li {
  margin-bottom: .9em;
  padding-left: 1.6em;
  text-indent: -1.6em;
}

/* Zweispaltige Namenslisten (Teilnehmende, Institutionen) */
.cols { columns: 2 220px; column-gap: var(--spalte); }
.cols > li { break-inside: avoid; }

/* Agenda-Zeilen: Zeit und Programmpunkt */
.agenda { list-style: none; padding-left: 0; }
.agenda > li {
  display: flex;
  gap: 16px;
  margin-bottom: .5em;
}
.agenda .zeit {
  flex: 0 0 5.5em;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}
.agenda .pause { color: var(--text-leise); font-style: italic; }

/* ------------------------------------------------- Inhaltsverzeichnis (TOC) */

.toc {
  margin: 0 0 2.5em;
  padding: 18px 24px;
  background: var(--flaeche-leise);
  border: 1px solid var(--linie);
}
.toc-heading {
  margin: 0 0 .4em;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-leise);
}
/* Die langen Verzeichnisse (data-sources hat 27 Eintraege) laufen mehr-
   spaltig, sonst schiebt das Verzeichnis den Text unter die Falz. */
.toc ol {
  margin: 0;
  padding-left: 1.4em;
  columns: 2 260px;
  column-gap: var(--spalte);
}
.toc ol > li { break-inside: avoid; }
.toc ul { margin: .2em 0 .4em; padding-left: 1.2em; list-style: none; }
.toc li { margin-bottom: .1em; }
.toc a { color: var(--text); }
.toc a:hover { color: var(--blau); }

/* Sprungziele nicht unter den Sticky-Header rutschen lassen */
:target { scroll-margin-top: 88px; }

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

.table-scroll { overflow-x: auto; margin: 0 0 1.5em; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
}
th, td {
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linie);
}
thead th {
  font-weight: 600;
  background: var(--flaeche);
  border-bottom: 2px solid var(--linie-stark);
}
tbody tr:hover { background: var(--flaeche-leise); }

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

.site-footer {
  padding: 28px 0;
  font-size: .875rem;
  color: var(--text-leise);
  background: var(--flaeche);
  border-top: 1px solid var(--linie);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  align-items: baseline;
  justify-content: space-between;
}
.footer-note { margin: 0; }
.footer-menu {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-menu li { margin: 0; }
.footer-menu a { color: var(--text-leise); }
.footer-menu a:hover { color: var(--blau); }

/* ================================================== Umbruch: Spalten (760px) */

@media (max-width: 760px) {
  .row { gap: 0; }
  .row > * { flex-basis: 100% !important; }
  .cols { columns: 1; }
  h1 { font-size: 1.75rem; }
  .data-frame iframe { height: 460px; }
}

/* =============================================== Umbruch: Navigation (940px) */

@media (max-width: 940px) {
  .nav-toggle { display: block; }

  .main-nav {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    display: none;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    background: #fff;
    border-bottom: 1px solid var(--linie);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
  }
  .nav-open .main-nav { display: block; }

  .site-header { position: relative; }
  .header-inner { position: static; }

  .menu { display: block; padding: 8px 24px 16px; }
  /* zurueck auf block: der Aufklapp-Pfeil unten arbeitet mit float */
  .menu-item > a,
  .menu-item > span {
    display: block;
    height: auto;
    padding: 12px 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--linie);
  }
  .menu-item.current > a,
  .menu-item.current > span { color: var(--blau); }

  .menu-item.has-sub > a::after,
  .menu-item.has-sub > span::after {
    content: '';
    float: right;
    width: 8px; height: 8px;
    margin: 6px 4px 0 0;
    border-right: 2px solid var(--text-leise);
    border-bottom: 2px solid var(--text-leise);
    transform: rotate(45deg);
  }
  .menu-item.open > a::after,
  .menu-item.open > span::after { transform: rotate(-135deg); }

  .submenu {
    position: static;
    display: none;
    min-width: 0;
    padding: 4px 0 10px 16px;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .menu-item.open > .submenu { display: block; }
  /* Auf Touch nicht per Hover aufklappen -- das macht nav.js */
  .menu-item:hover > .submenu,
  .menu-item:focus-within > .submenu { opacity: 1; visibility: visible; }
  .menu-item:not(.open):hover > .submenu { display: none; }
  .menu > li:nth-last-child(-n+2) .submenu { left: auto; right: auto; }
  .submenu a { padding: 8px 0; }

  :target { scroll-margin-top: 24px; }
}

@media (max-width: 420px) {
  .logo-text { font-size: 1rem; max-width: 7.5em; }
}

@media print {
  .site-header, .site-footer, .toc, .skip-link { display: none; }
  body { font-size: 11pt; }
  a { color: inherit; }
}