/* The look of www.fau.org, on top of Barceloneta.
 *
 * Barceloneta's css comes first, through the import; the rest of this file
 * changes it towards the site's design from Plone 5.1. */

@import url("../../++theme++barceloneta/css/barceloneta.min.css");


/* Fonts */

@font-face {
  font-family: "SourceSansPro";
  src: url("../fonts/source-sans-pro/SourceSansPro-Regular.otf") format("opentype");
  font-weight: 400;
}
@font-face {
  font-family: "SourceSansPro";
  src: url("../fonts/source-sans-pro/SourceSansPro-Semibold.otf") format("opentype");
  font-weight: 600;
}
@font-face {
  font-family: "SourceSansPro";
  src: url("../fonts/source-sans-pro/SourceSansPro-Bold.otf") format("opentype");
  font-weight: 700;
}
@font-face {
  font-family: "SourceSansPro";
  src: url("../fonts/source-sans-pro/SourceSansPro-Black.otf") format("opentype");
  font-weight: 800;
}
@font-face {
  font-family: "SourceSerifPro";
  src: url("../fonts/source-serif-pro/SourceSerifPro-Regular.otf") format("opentype");
  font-weight: 400;
}
@font-face {
  font-family: "SourceSerifPro";
  src: url("../fonts/source-serif-pro/SourceSerifPro-Bold.otf") format("opentype");
  font-weight: 700;
}


/* Colours, type, width */

:root {
  --fau-red: #c00301;
  --fau-red-bg: #c00200;
  --fau-sans: "SourceSansPro", Arial, Helvetica, sans-serif;
  --fau-serif: "SourceSerifPro", Georgia, "Times New Roman", Times, serif;
  --fau-width: 960px;

  --bs-body-font-family: var(--fau-sans);
  --bs-body-font-size: 14px;
  --bs-body-line-height: 1.428571429;
  --bs-body-color: #333;
  --bs-body-bg: #fafafa;
  --bs-link-color: var(--fau-red);
  --bs-link-color-rgb: 192, 3, 1;
  --bs-link-hover-color: #000;
  --bs-link-hover-color-rgb: 0, 0, 0;
  --bs-primary: var(--fau-red);
  --bs-primary-rgb: 192, 3, 1;
  --plone-link-color: var(--fau-red);
  --plone-link-hover-color: #000;
}

body {
  font-family: var(--fau-sans);
  font-size: 14px;
  color: #333;
  background-color: #fafafa;
}

p, address {
  font-family: var(--fau-serif);
  hyphens: auto;
}
/* Bootstrap 3's space below paragraphs and lists, not 5's 1rem */
p, ul, ol {
  margin-bottom: 10px;
}

/* Headings as in Bootstrap 3, which the texts were written with: fixed
   sizes and space above, not Bootstrap 5's none */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fau-sans);
  font-weight: 700;
  line-height: 1.1;
}
h1, h2, h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}
h4, h5, h6 {
  margin-top: 10px;
  margin-bottom: 10px;
}
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 14px; color: #696969; }
h6 { font-size: 12px; }

/* Bootstrap 5 makes b "bolder", which is Black inside the bold headings
   that many texts have */
b {
  font-weight: 700;
}
strong {
  font-weight: 600;
}

label {
  font-weight: 600;
}

a {
  text-decoration: none;
}
a:hover, a:focus {
  color: #000;
}

.container {
  max-width: var(--fau-width);
}

/* Plone shows no portlet columns here, so the content takes all of the row,
   whatever Barceloneta makes of the col-one/col-two classes on body */
#visual-portal-wrapper #portal-column-content {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
}

/* Barceloneta compiles its button colours; red like the links instead */
.btn-primary {
  --bs-btn-bg: var(--fau-red);
  --bs-btn-border-color: var(--fau-red);
  --bs-btn-hover-bg: #9a0201;
  --bs-btn-hover-border-color: #9a0201;
  --bs-btn-active-bg: #7a0101;
  --bs-btn-active-border-color: #7a0101;
  --bs-btn-disabled-bg: var(--fau-red);
  --bs-btn-disabled-border-color: var(--fau-red);
}

/* Links in capitals with a chevron */
.tileFooter a, .more a, .carousel-caption a, .chevronRedLink, .chevronBlackBoldLink, .uppercase-link,
.template-summary_view #content-core article.row > .col > div:last-child a {
  font-family: var(--fau-sans);
  letter-spacing: 0.075em;
  text-transform: uppercase;
}
.more a, .chevronRedLink {
  font-size: 0.8em;
}
.more a::before, .chevronRedLink::before, .chevronBlackBoldLink::before, .tileFooter a::before,
.template-summary_view #content-core article.row > .col > div:last-child a::before {
  content: "› ";
}
.chevronBlackBoldLink {
  color: #000;
  font-weight: bold;
}

/* Open sections from Bootstrap 3 ("collapse in"), which Bootstrap 5 would
   hide; js/wwwfauorg.js toggles them */
.collapse.in {
  display: block;
}


/* The black bar: logo, navigation, search */

#portal-globalnav-wrapper {
  --bs-navbar-background: #000;
  --bs-navbar-active-background: #1a1a1a;
  --bs-navbar-hover-background: #1a1a1a;
  background-color: #000;
  padding: 0;
  min-height: 40px;
}
#portal-globalnav-wrapper > .container-fluid {
  padding-left: 15px;
  padding-right: 15px;
}
#portal-logo img {
  height: 20px;
  width: auto;
}
#portal-globalnav {
  margin-left: auto;
  margin-right: auto !important;
}
#portal-globalnav .nav-link {
  color: #fff;
  font-family: var(--fau-sans);
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  padding: 10px;
}
#portal-globalnav .nav-link:hover,
#portal-globalnav .inPath > .nav-link,
#portal-globalnav .current > .nav-link {
  background-color: #1a1a1a;
  color: #fff;
}
/* the start page is the logo's */
#portal-globalnav .index_html {
  display: none;
}
#fau-search {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #fff;
  /* a heavy ring and handle, like the glyphicon of the old site */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000'%3E%3Ccircle cx='6.5' cy='6.5' r='4.75' stroke-width='2.5'/%3E%3Cpath d='M10.2 10.2l4 4' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") right center / 15px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000'%3E%3Ccircle cx='6.5' cy='6.5' r='4.75' stroke-width='2.5'/%3E%3Cpath d='M10.2 10.2l4 4' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") right center / 15px no-repeat;
}
#offcanvasNavbar {
  background-color: #000;
}
@media (max-width: 991.98px) {
  #portal-globalnav .nav-link {
    padding: 10px 0;
  }
}


/* Breadcrumbs: small capitals, a dash below */

#portal-breadcrumbs {
  background: transparent;
  padding: 0;
  margin: 1em 0;
  border: 0;
}
#portal-breadcrumbs .breadcrumb {
  --bs-breadcrumb-divider: "/";
  --bs-breadcrumb-item-padding-x: 0.25em;
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.2;
  text-transform: uppercase;
}
#portal-breadcrumbs .breadcrumb-item,
#portal-breadcrumbs .breadcrumb-item a,
#portal-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
  color: #000;
}
#portal-breadcrumbs .breadcrumb-item.active {
  font-weight: 600;
}
#portal-breadcrumbs .container::after {
  content: "—";
  display: block;
  line-height: 0.8;
}


/* Content */

.documentFirstHeading,
#content > header > h1 {
  border-bottom: 0;
  color: #333;
  margin-top: 0;
  padding-bottom: 9px;
}
.documentByLine {
  color: #696969;
  margin-bottom: 10px;
}
/* The description is a teaser for listings; pages have it in their text */
#content > header .lead,
#content > header .documentDescription {
  display: none;
}
/* where a mosaic page shows it, small and grey */
.mosaic-IDublinCore-description-tile .mosaic-tile-content > * {
  color: #777;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.428571429;
  margin-bottom: 10px;
}
/* Images in texts no wider than Plone 5's "large" scale, which they were
   chosen for: Plone 6's large variant is wider than the content */
#content img.picture-variant-large {
  max-width: min(100%, 768px);
  height: auto;
}
.portaltype-news-item #content-core p {
  font-size: 14pt;
  line-height: 175%;
  text-align: justify;
  hyphens: auto;
}
.newsImageContainer {
  float: right;
  max-width: 200px;
  margin: 0 0 1em 2em;
}
/* Barceloneta's space below the title, and below the lead image: the image
   floats, so its empty section's margin would push the title down */
#content > header,
#section-leadimage {
  margin-bottom: 0;
}

/* Tables in texts as on Plone 5: a light line around every cell, grey text,
   and stripes on "listing"; also over their border="…" attributes */
#parent-fieldname-text table,
.mosaic-tile-content table {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  color: #696969;
}
#parent-fieldname-text table > * > tr > *,
.mosaic-tile-content table > * > tr > * {
  padding: 8px;
  border: 1px solid #e5e5e5;
  background-color: transparent;
  color: inherit;
  vertical-align: top;
}
#parent-fieldname-text table th,
.mosaic-tile-content table th {
  color: #4c4c4c;
}
#parent-fieldname-text table.listing > tbody > tr:nth-child(odd) > *,
.mosaic-tile-content table.listing > tbody > tr:nth-child(odd) > * {
  background-color: #f6f6f6;
}

/* Summary view (artikel, Kämpfe und Kampagnen, Materialien) as on Plone 5:
   the title above, the picture left of the description, "› Mehr" below, a
   line between the items. Plone 6 has the picture in a column to the right
   of all the rest. Without a picture, its grid column stays empty. */
.template-summary_view #content-core article.row {
  display: grid;
  grid-template-columns: auto 1fr;
  margin: 0 0 35px;
  border-bottom: 1px solid #000;
}
.template-summary_view #content-core article.row > * {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}
.template-summary_view #content-core article.row > .col {
  display: contents;
}
.template-summary_view #content-core article.row h2 {
  grid-column: 1 / -1;
  grid-row: 1;
  font-size: 1.1em;
  margin: 20px 0 10px;
}
.template-summary_view #content-core article.row h2 a {
  color: #000;
}
/* the byline, empty as on Plone 5 */
.template-summary_view #content-core article.row > .col > .mb-3 {
  display: none;
}
.template-summary_view #content-core article.row > .col-3 {
  grid-column: 1;
  grid-row: 2;
  padding-right: 5px;
}
.template-summary_view #content-core article.row > .col > div:not(:last-child) {
  grid-column: 2;
  grid-row: 2;
  font-size: 1.1em;
  line-height: 20px;
}
.template-summary_view #content-core article.row > .col > div:last-child {
  grid-column: 1 / -1;
  grid-row: 3;
  margin: 5px 0 0 !important;
}

/* Listing view (Branchen): the descriptions grey */
.template-listing_view #content-core .entries article p {
  color: #777;
}

/* Keywords are for the listings and the carousel ("feature"); the old site
   did not show them on the page */
#section-category {
  display: none;
}

/* Small black labels */
mark {
  font-weight: 400;
  letter-spacing: 0.075em;
  background-color: #000;
  color: #fff;
  display: inline-block;
  line-height: 1em;
  margin: -0.15em 0 -0.3em;
  padding: 0.15em 0.2em 0.3em;
  text-transform: uppercase;
}
mark a, mark a:hover {
  color: #fff;
  text-decoration: none;
}

.bordered {
  border: thin solid;
  padding: 0.5em !important;
}
.bordered > li:last-child {
  border-top: thin solid;
  margin: 2.5em -0.5em 0;
  padding: 0.3em 0.5em 0;
}
.borderedList {
  padding-left: 0;
  list-style: none;
}
.borderedList > li {
  border: thin solid;
  border-bottom: none;
  padding: 0.3em 0 0.5em 0.4em;
}
.borderedList > li:last-child {
  border-bottom: thin solid;
}
.std-entry {
  color: #000;
  letter-spacing: normal;
  text-transform: none;
}
.std-entry.contenttype-event {
  font-weight: 600;
}

/* Section headings with a thick line above */
.portletHeader, .section-header, .section-startseite #content h2,
.portlet .card-header {
  border-top: thick solid #000;
  color: #000;
  font-family: var(--fau-sans);
  font-size: 1.2em;
  font-weight: 700;
  letter-spacing: 0.075em;
  margin: 1em 0 0.5em;
  padding-top: 0.4em;
  text-transform: uppercase;
}
.section-startseite #content h2 a, .section-header a, .portlet .card-header a {
  color: #000;
}
/* the line, but not the capitals: those are for .section-header */
.mosaic-tile-content h3 {
  border-top: thick solid #000;
  color: #000;
  font-size: 1.2em;
  margin: 1em 0 0.5em;
  padding-top: 0.4em;
}
.section-startseite #content h2 a.weiteres, .weiteres a {
  color: var(--fau-red) !important;
  float: right;
  font-size: 0.8em;
  font-weight: normal;
}
.section-startseite #content h2 a.weiteres::before, .weiteres a::before {
  content: "› ";
}
.section-startseite #content h3 {
  font-size: 1.3em;
}
.section-startseite #content ul, .mosaic-tile-content ul {
  list-style: none;
  padding: 0;
}

/* Teasers: picture, label, headline */
.featurebox h4 {
  font-size: 1.1em;
}
.featurebox h4 a {
  color: #000;
  font-family: var(--fau-sans);
  font-weight: 700;
  text-transform: none;
}
.col-md-3 img {
  height: 120px;
  width: 100%;
  object-fit: cover;
}
.col-md-6 img {
  height: 240px;
  width: 100%;
  object-fit: cover;
}
/* Bootstrap's negative margins would pull the teasers out of the content
   width; the old theme cancelled them for every row */
.row-only-left-padding {
  margin-left: 0;
  margin-right: 0;
}
.row-only-left-padding > div {
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 768px) {
  .row-only-left-padding > div + div {
    padding-left: 30px;
  }
}


/* Mosaic pages: rows at the content width, except the start page's first one,
   the carousel */

.mosaic-grid-row {
  max-width: var(--fau-width);
  margin-left: auto;
  margin-right: auto;
}
/* The layouts come from Mosaic 2 on Plone 5.1, whose width classes Mosaic 4
   no longer knows */
@media (min-width: 768px) {
  .mosaic-grid-row > .mosaic-grid-cell { flex: 0 0 auto; }
  .mosaic-grid-row > .mosaic-width-full { width: 100%; }
  .mosaic-grid-row > .mosaic-width-three-quarters { width: 75%; }
  .mosaic-grid-row > .mosaic-width-two-thirds { width: 66.6667%; }
  .mosaic-grid-row > .mosaic-width-half { width: 50%; }
  .mosaic-grid-row > .mosaic-width-third { width: 33.3333%; }
  .mosaic-grid-row > .mosaic-width-quarter { width: 25%; }
}
.section-startseite .mosaic-grid-row:first-of-type,
.section-startseite .mosaic-grid-row:first-of-type > div {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
.section-startseite .documentFirstHeading {
  display: none;
}


/* Carousel of the start page: the picture above, the text below it on red,
   so that it stays readable whatever picture the editors choose. The band
   has a fixed height, so the page does not jump between the slides; too
   long titles and descriptions are cut off. The band's height is that of
   the longest content the line clamps allow, and the dots below it. */

#carousel {
  --fau-carousel-image: 280px;
  --fau-carousel-band: 240px;
  background-color: var(--fau-red-bg);
  text-align: center;
}
/* on very wide screens no wider than twice the content, so that it does
   not become a thin strip; black beside it, like the bar at the top */
#carousel .carousel-item {
  background-color: #000;
}
#carousel .carousel-item img {
  width: 100%;
  max-width: calc(2 * var(--fau-width));
  margin: 0 auto;
  height: var(--fau-carousel-image);
  object-fit: cover;
}
#carousel .carousel-caption {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: var(--fau-carousel-band);
  padding: 22px 15% 0;
  background-color: var(--fau-red-bg);
}
#carousel h1 {
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 8px;
}
#carousel h1::after {
  content: "—";
  display: block;
  line-height: 1;
  margin-top: 2px;
}
#carousel h1 a,
#carousel p.byline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
#carousel h1 a {
  color: #fff;
}
#carousel p.byline {
  margin-bottom: 10px;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 200;
}
#carousel mark {
  background-color: #fff;
}
#carousel mark a {
  color: var(--fau-red);
}
/* the arrows on the picture, the dots at the bottom of the band */
#carousel .carousel-control-prev,
#carousel .carousel-control-next {
  bottom: var(--fau-carousel-band);
}
#carousel .carousel-indicators {
  margin-bottom: 12px;
}
/* dots, as in Bootstrap 3, not bars */
#carousel .carousel-indicators [data-bs-target] {
  box-sizing: border-box;
  align-self: center;
  width: 10px;
  height: 10px;
  margin: 1px;
  border: 1px solid #fff;
  border-radius: 50%;
  background-color: transparent;
  opacity: 1;
}
#carousel .carousel-indicators .active {
  width: 12px;
  height: 12px;
  margin: 0;
  background-color: #fff;
}
@media (max-width: 767px) {
  #carousel {
    --fau-carousel-image: 190px;
    --fau-carousel-band: 180px;
  }
  #carousel .carousel-caption {
    padding: 16px 16px 0;
  }
  #carousel p.byline {
    display: none;
  }
  #carousel h1 {
    font-size: 22px;
  }
  #carousel h1 a {
    -webkit-line-clamp: 3;
  }
}


/* Locals: red header, blog with calendar dates */

.jumbotron {
  background-color: var(--fau-red-bg);
  color: #fff;
  padding: 4rem 0 3rem;
  margin-bottom: 1em;
}
.jumbotron mark {
  background-color: #fff;
}
.jumbotron mark a {
  color: var(--fau-red);
}
.local .jumbotron .container {
  max-width: var(--fau-width);
}
.local .jumbotron h1 {
  font-size: 22px;
  font-weight: 600;
}
.local .jumbotron h1::after {
  content: "\A—";
  white-space: pre;
}
.local .jumbotron h1 span {
  font-weight: 400;
}
.local .jumbotron h1 span::before {
  content: "–\A";
}
.local .jumbotron .info p,
.local .jumbotron address,
.local .jumbotron address p {
  font-family: var(--fau-sans) !important;
  font-size: 14px !important;
}
.local .jumbotron a {
  color: #fff;
  text-decoration: underline;
}
.local > .row,
.local > .breadcrumb {
  max-width: var(--fau-width);
  margin-left: auto;
  margin-right: auto;
}
.local > .breadcrumb {
  margin-bottom: 2em;
  padding: 0 calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  background: transparent;
}
.local > .breadcrumb #portal-breadcrumbs {
  margin-top: 0;
}
.local > .breadcrumb #portal-breadcrumbs .container {
  padding: 0;
}
.local .external-website img {
  margin-top: 2em;
}

.tileItem {
  border-bottom: 1px solid #000;
  margin-bottom: 2.5em;
  overflow: hidden;
}
.tileHeadline {
  font-size: 1.1em;
}
.tileHeadline a {
  color: #000;
  text-transform: none;
}
.tileBody .description {
  font-size: 1.1em;
}
.vevent div.cal_date {
  float: left;
  text-align: center;
  margin: 42px 1.5em 0.5em 0;
  background-color: var(--fau-red);
  min-width: 4.4em;
  width: 100px;
  overflow: hidden;
}
.cal_month {
  background: #000;
  color: #fff;
  display: block;
  padding: 6px 12px;
}
.cal_day {
  color: #fff;
  display: block;
  font-size: 36px;
  font-weight: 700;
}
.cal_wkday {
  color: #fff;
  display: block;
  font-size: 12px;
  font-weight: 300;
  padding: 0 12px 6px;
}

/* Tiles listing and selecting the locals */
.localselecttile img {
  display: block;
  margin: 0 auto 1em;
}
.syndikatswahl {
  margin: 1em 0 -1em;
}
.locallisttile .card {
  border-radius: 0;
  border-color: #000;
  margin-bottom: 20px;
}
.locallisttile .card-header {
  background-color: #fafafa;
  border-color: #000;
  padding: 10px 15px;
}
.locallisttile .card-header a.h5 {
  font-size: 14px;
  font-weight: 700;
}
.locallisttile .card-header .btn-link {
  font-size: 14px;
  padding: 0;
  margin-right: 14px;
  text-decoration: none;
}


/* Portlets, where a view shows them */

.portlet.card {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.portlet .card-header {
  background: transparent;
  border-bottom: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}
.portlet .card-body, .portlet .card-footer {
  padding-left: 0;
  padding-right: 0;
  background: transparent;
}
.portlet .list-group-item {
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}


/* Footer */

#portal-footer-wrapper {
  margin-top: 2em;
  background-color: #e1e1e1;
  color: #000;
  padding: 1.5em 0 0.5em;
}
#portal-footer-wrapper a {
  color: #000;
  letter-spacing: normal;
  text-transform: none;
}
#portal-footer-wrapper a::before {
  content: "› ";
}
#portal-footer-wrapper .doormat {
  text-align: left;
}
/* The footer is a static text portlet with Bootstrap 3's grid: its columns
   sit in a .container without a .row, which Bootstrap 5 needs to put them
   side by side */
#portal-footer-wrapper .doormat .container {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  padding-right: 0;
}
#portal-footer-wrapper .doormat .container > [class*="col-"] {
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  padding-right: calc(var(--bs-gutter-x) * 0.5);
}
#portal-footer-wrapper h3 {
  font-size: 24px;
}
#portal-footer-wrapper .doormat h2 {
  border: 0;
  letter-spacing: normal;
  margin: 0 0 0.5em;
  padding: 0;
  text-transform: none;
  color: #333;
  font-size: 1.7em;
  font-weight: 700;
}
#portal-footer-wrapper ul {
  list-style: none;
  padding-left: 0;
}
#portal-footer-wrapper p {
  color: #333;
}
#portal-footer-wrapper img {
  width: 140px;
  height: auto;
  margin-bottom: 10px;
}
#portal-footer-wrapper .colophon,
#portal-footer-wrapper .copyright,
#portal-footer-wrapper .site-actions {
  font-size: 12px;
  color: #555;
}
#portal-footer-wrapper .copyright {
  text-align: left;
}
#portal-footer-wrapper .colophon a,
#portal-footer-wrapper .copyright a {
  color: #555;
}


/* Edit mode: Plone's own look for Plone's own things */

.plone-toolbar-container a {
  text-transform: none;
  letter-spacing: normal;
}