/* ******************************************************************** */
/* BTV Fakultät 6, Layout angelehnt an das RWTH-Webdesign (2025)       */
/* ******************************************************************** */

:root {
  --clr-blue:     #00549F;
  --clr-blue-75:  #407FB7;
  --clr-blue-50:  #8EBAE5;
  --clr-blue-25:  #C7DDF2;
  --clr-blue-10:  #E8F1FA;
  --clr-black:    #000000;
  --clr-gray-bg:  #E7E7E7;
  --clr-gray-7:   #ECEDED;
  --clr-white:    #FFFFFF;

  /* fließende Skalierung zwischen 320px und 1920px Viewport */
  --q: clamp(0px, calc((100vw - 320px) / 1600), 1px);

  --fs-5: calc(32.2px + 35.6 * var(--q));  --lh-5: calc(36.0px + 39.6 * var(--q));
  --fs-4: calc(28.0px + 24.5 * var(--q));  --lh-4: calc(32.0px + 26.4 * var(--q));
  --fs-3: calc(24.3px + 16.5 * var(--q));  --lh-3: calc(30.0px + 18.0 * var(--q));
  --fs-2: calc(21.2px + 10.6 * var(--q));  --lh-2: calc(28.0px + 12.0 * var(--q));
  --fs-1: calc(18.4px +  6.5 * var(--q));  --lh-1: calc(25.0px +  8.4 * var(--q));
  --fs-0: calc(16.0px +  3.6 * var(--q));  --lh-0: calc(22.0px +  6.0 * var(--q));
  --fs-s: calc(13.9px +  1.6 * var(--q));  --lh-s: calc(20.0px +  2.4 * var(--q));

  --sp-3xs: calc( 4px +  1.2 * var(--q));
  --sp-2xs: calc( 8px +  2.4 * var(--q));
  --sp-xs:  calc(12px +  3.6 * var(--q));
  --sp-s:   calc(16px +  3.6 * var(--q));
  --sp-m:   calc(22px +  6.0 * var(--q));
  --sp-l:   calc(26px + 13.2 * var(--q));
  --sp-xl:  calc(35px + 27.0 * var(--q));
  --sp-2xl: calc(60px + 48.0 * var(--q));

  --gap: calc(18px + 30 * var(--q));
  --content-width: 60rem;

  --icon-arrow-r:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5'/%3E%3C/svg%3E");
  --icon-arrow-ur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M3 13L13 3M5 3h8v8'/%3E%3C/svg%3E");
  --icon-mail:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3'%3E%3Crect x='1.5' y='3.5' width='13' height='9'/%3E%3Cpath d='M1.5 3.5L8 9l6.5-5.5'/%3E%3C/svg%3E");
  --icon-menu:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M2 6h20M2 12h20M2 18h20'/%3E%3C/svg%3E");
  --icon-close:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M4 4l16 16M20 4L4 20'/%3E%3C/svg%3E");
}

/* ******************************************************************** */
/* Grundlagen */

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

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

body {
  margin: 0;
  font-family: Plain, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--fs-0);
  line-height: var(--lh-0);
  font-weight: 300;
  color: var(--clr-black);
  background-color: var(--clr-gray-bg);
}

.site-wrapper {
  max-width: 1920px;
  min-height: 100vh;
  margin: 0 auto;
  background-color: var(--clr-white);
  display: flex;
  flex-direction: column;
}

.wrap {
  padding-left: var(--gap);
  padding-right: var(--gap);
}

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

strong, b { font-weight: 600; }

h1, h2, h3, h4 {
  font-weight: 280;
  margin: 0;
  hyphens: auto;
}
h1 { font-size: var(--fs-5); line-height: var(--lh-5); }
h2 { font-size: var(--fs-3); line-height: var(--lh-3); }
h3 { font-size: var(--fs-2); line-height: var(--lh-2); }
h4 { font-size: var(--fs-1); line-height: var(--lh-1); }

p { margin: 0 0 var(--sp-s); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--sp-s);
  z-index: 100;
  padding: var(--sp-3xs) var(--sp-2xs);
  background: var(--clr-white);
  border: 1px solid var(--clr-black);
  color: var(--clr-black);
}
.skip-link:focus { left: var(--sp-s); }

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

/* ******************************************************************** */
/* Links: schwarz, fett, hellblaue Unterstreichung mit Pfeil (RWTH-Stil) */

a { color: inherit; text-decoration: none; }

main a[href],
.styled-links a[href] {
  --lnk-icon: var(--icon-arrow-r);
  --lnk-icon-w: calc(14px + 3 * var(--q));
  font-weight: 600;
  padding-right: calc(var(--lnk-icon-w) + var(--sp-3xs));
  padding-bottom: 0.1em;
  background-image:
    linear-gradient(var(--clr-blue-50), var(--clr-blue-50)),
    linear-gradient(var(--clr-black), var(--clr-black)),
    var(--lnk-icon);
  background-size: 100% 2px, 0 2px, var(--lnk-icon-w) auto;
  background-position: 100% 100%, 0 100%, 100% 50%;
  background-repeat: no-repeat;
  transition: background-size 150ms linear;
}
main a[href^="http"],
.styled-links a[href^="http"] {
  --lnk-icon: var(--icon-arrow-ur);
  --lnk-icon-w: calc(11px + 2.5 * var(--q));
}
main a[href^="mailto:"],
.styled-links a[href^="mailto:"] {
  --lnk-icon: var(--icon-mail);
}
main a[href]:is(:hover, :focus-visible),
.styled-links a[href]:is(:hover, :focus-visible) {
  background-size: 0 2px, 100% 2px, var(--lnk-icon-w) auto;
}
main a[href^="tel:"] {
  font-weight: inherit;
  background: none;
  padding: 0;
}

/* ******************************************************************** */
/* Header */

.site-header {
  background-color: var(--clr-white);
  border-bottom: 1px solid var(--clr-black);
}

.top-bar {
  background-color: var(--clr-blue-10);
  font-size: var(--fs-s);
  line-height: var(--lh-s);
  padding-top: var(--sp-2xs);
  padding-bottom: var(--sp-2xs);
}
.top-bar ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3xs) var(--sp-m);
  margin: 0;
  padding: 0;
  list-style: none;
}
.top-bar li:last-child { margin-left: auto; }
.top-bar a:is(:hover, :focus-visible) { text-decoration: underline; }

.bottom-area {
  display: grid;
  grid-template: "menu logo" auto
                 "headline logo" 1fr
                 / 1fr auto;
  column-gap: var(--sp-l);
  align-items: start;
}

.menu-toggle {
  grid-area: menu;
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  margin: var(--sp-s) 0 var(--sp-2xs);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  color: var(--clr-black);
  justify-self: start;
}
.menu-toggle::before {
  content: "";
  width: calc(32px + 8 * var(--q));
  height: var(--lh-1);
  background: var(--icon-menu) no-repeat 50% / 100%;
}
.menu-toggle[aria-expanded="true"]::before {
  background-image: var(--icon-close);
}

.unit-headline {
  grid-area: headline;
  align-self: end;
  margin: 0 0 var(--sp-s);
}
.unit-headline a {
  display: block;
  font-size: var(--fs-3);
  line-height: var(--lh-3);
  font-weight: 280;
}
.unit-headline span {
  display: block;
  font-size: var(--fs-s);
  line-height: var(--lh-s);
  margin-top: var(--sp-3xs);
}

/* Das SVG enthält den Schutzraum des Logos; rechts wird er wie auf
   rwth-aachen.de per negativem Rand an die Satzkante gezogen. */
.logo-wrapper {
  --logo-h: calc(80px + 40 * var(--q));
  grid-area: logo;
  display: block;
  margin-right: calc(var(--logo-h) * -0.156);
}
.logo-wrapper img {
  display: block;
  height: var(--logo-h);
  width: auto;
}

/* Hauptnavigation */
.main-nav {
  border-top: 1px solid var(--clr-black);
}
.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-m);
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-nav a {
  display: block;
  padding: var(--sp-xs) 0 calc(var(--sp-xs) - 3px);
  border-bottom: 3px solid transparent;
  font-weight: 500;
}
.main-nav a:is(:hover, :focus-visible) {
  border-bottom-color: var(--clr-blue-50);
}
.main-nav a[aria-current="page"] {
  border-bottom-color: var(--clr-blue);
}

/* Auf großen Bildschirmen ist das Menü immer sichtbar */
@media (min-width: 1100px) {
  .menu-toggle { display: none; }
  .bottom-area { grid-template: "headline logo" auto / 1fr auto; }
}
@media (max-width: 1099.98px) {
  .js .main-nav:not(.open) { display: none; }
  .main-nav ul { flex-direction: column; }
  .main-nav li + li { border-top: 1px solid var(--clr-gray-7); }
}
@media (max-width: 599.98px) {
  .bottom-area {
    grid-template: "menu logo" auto
                   "headline headline" auto
                   / auto 1fr;
  }
  .logo-wrapper { justify-self: end; }
  .logo-wrapper { --logo-h: 64px; }
  .top-bar li:last-child { margin-left: 0; }
}

/* ******************************************************************** */
/* Inhalt */

main {
  flex: 1;
  padding-bottom: var(--sp-2xl);
}

.breadcrumb {
  font-size: var(--fs-s);
  line-height: var(--lh-s);
  padding-top: var(--sp-s);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb li + li::before {
  content: "/";
  padding: 0 var(--sp-2xs);
}
main .breadcrumb a[href] {
  font-weight: 300;
  padding-right: 0;
  background-image: none;
}
main .breadcrumb a[href]:is(:hover, :focus-visible) { text-decoration: underline; }

.page-header {
  padding-top: var(--sp-xl);
  padding-bottom: var(--sp-l);
}
.page-header h1 { max-width: 22ch; }
.page-header h1.wide { max-width: 30ch; }

.article {
  max-width: var(--content-width);
}
.article.full {
  max-width: none;
}
.article h2 {
  margin: var(--sp-xl) 0 var(--sp-s);
}
.article > h2:first-child { margin-top: 0; }
.article ul:not([class]) {
  margin: 0 0 var(--sp-s);
  padding-left: 1.2em;
}
.article ul:not([class]) li { margin-bottom: var(--sp-3xs); }
.article ul:not([class]) li::marker { color: var(--clr-blue); }

/* Einleitung mit Bild (Startseite) */
.intro {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--sp-xl);
  align-items: start;
  max-width: none;
}
.intro figure { margin: 0; }
.intro figure img { display: block; width: 100%; }
@media (max-width: 899.98px) {
  .intro { grid-template-columns: 1fr; }
  .intro figure { order: -1; }
}

.lead {
  font-size: var(--fs-1);
  line-height: var(--lh-1);
}

/* Linkliste (Gremien) */
.link-list {
  margin: 0 0 var(--sp-m);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--clr-black);
}
.link-list li {
  border-bottom: 1px solid var(--clr-black);
}
main .link-list a[href] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-s);
  padding: var(--sp-xs) 0;
  font-weight: 500;
  background-image: none;
}
main .link-list a[href]::after {
  content: "";
  flex: 0 0 var(--lnk-icon-w);
  height: var(--lnk-icon-w);
  background: var(--lnk-icon) no-repeat 50% / 100%;
  transition: transform 150ms linear;
}
main .link-list a[href]:is(:hover, :focus-visible) {
  background-color: var(--clr-blue-10);
}
main .link-list a[href]:is(:hover, :focus-visible)::after {
  transform: translateX(-4px);
}

/* Hinweisbox */
.info-box {
  background-color: var(--clr-blue-10);
  padding: var(--sp-m);
  margin: var(--sp-l) 0;
}
.info-box p:last-child { margin-bottom: 0; }

/* Mitglieder der Gremien */
.members {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--sp-l);
  margin-top: var(--sp-xl);
}
.members h2 {
  margin: 0 0 var(--sp-xs);
  font-size: var(--fs-2);
  line-height: var(--lh-2);
}
.members ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--clr-black);
}
.members li {
  padding: var(--sp-xs) 0;
  border-bottom: 1px solid var(--clr-black);
  font-weight: 500;
}
.members-note {
  margin-top: var(--sp-m);
  font-size: var(--fs-s);
  line-height: var(--lh-s);
}

/* Kontaktkarten (Startseite) */
/* 6 Kacheln: 3 × 2, auf Tablets 2 × 3, auf dem Handy untereinander */
.contacts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-l);
  margin: 0;
  padding: 0;
  list-style: none;
}
.contact {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--clr-black);
  padding-top: var(--sp-xs);
}
.contact .role {
  font-size: var(--fs-s);
  line-height: var(--lh-s);
  color: var(--clr-blue);
  font-weight: 500;
  margin: 0 0 var(--sp-3xs);
}
.contact h3 {
  font-size: var(--fs-2);
  line-height: var(--lh-2);
  margin: 0 0 var(--sp-2xs);
}
.contact p { margin: 0 0 var(--sp-2xs); }
.contact address {
  font-style: normal;
  margin: 0 0 var(--sp-2xs);
}
.contact .channels {
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 1099.98px) {
  .contacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639.98px) {
  .contacts { grid-template-columns: minmax(0, 1fr); }
}
.contact .channels li + li { margin-top: var(--sp-3xs); }
main .contact a[href] { overflow-wrap: anywhere; }

/* ******************************************************************** */
/* Footer */

.site-footer {
  font-size: var(--fs-s);
  line-height: var(--lh-s);
}
.site-footer .inner {
  border-top: 2px solid var(--clr-black);
  padding-top: var(--sp-l);
  padding-bottom: var(--sp-xl);
}
.site-footer .top-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--sp-l);
}
.site-footer h2 {
  font-size: var(--fs-1);
  line-height: var(--lh-1);
  margin: 0 0 var(--sp-2xs);
}
.site-footer p { margin: 0; }
.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer li + li { margin-top: var(--sp-2xs); }
.site-footer .bottom-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2xs) var(--sp-m);
  margin-top: var(--sp-l);
  padding-top: var(--sp-s);
  border-top: 1px solid var(--clr-black);
}
.site-footer .bottom-row .copyright { margin-right: auto; }
.site-footer .bottom-row a:is(:hover, :focus-visible) { text-decoration: underline; }

/* ******************************************************************** */
/* Druck */

@media print {
  body { background: none; }
  .top-bar, .main-nav, .menu-toggle, .breadcrumb { display: none !important; }
  main a[href] { background: none; padding: 0; }
}