/* JAM Gesellschaft – schlankes Theme ohne Bootstrap/Barceloneta.
   Farben, Schriften und Raster aus dem Vereinsfolder (incoming/*.pdf).
   Enthält nur die wenigen Bootstrap-kompatiblen Klassen, die Plone-Views
   und Add-ons im Besuchermodus ausgeben (row/col, card, badge, pagination …).
   Angemeldete laden zusätzlich barceloneta.min.css davor. */

:root {
  --jam-red: #870e12;
  --jam-red-dark: #6b0b0e;
  --jam-red-tint: #f6ecec;
  --jam-ink: #231f20;
  --jam-text: #3a443c;
  --jam-muted: #6f7a72;
  --jam-rule: #d9d6d6;
  --jam-raster: #aaa8a9;
  --jam-bg: #ffffff;
  --jam-font-head: "Noto Serif Display", Georgia, "Times New Roman", serif;
  --jam-font-body: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --jam-width: 72rem;
  --jam-gap: 1.5rem;
}

/* ---------- Schriften (lokal, OFL: Noto Serif Display, Barlow) ---------- */

@font-face {
  font-family: "Noto Serif Display";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/noto-serif-display-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Noto Serif Display";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/noto-serif-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-400-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Basis ---------- */

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

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

body.jam {
  margin: 0;
  background: var(--jam-bg);
  color: var(--jam-text);
  font-family: var(--jam-font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.4;
}

.jam img,
.jam svg,
.jam video {
  max-width: 100%;
  height: auto;
}

.jam a {
  color: var(--jam-red);
  text-decoration: none;
}

.jam a:hover,
.jam a:focus-visible {
  color: var(--jam-red-dark);
}

/* Unterstrichen sind nur Links im Inhaltsbereich. :where() hält die
   Spezifität niedrig, damit Schaltflächen, Seitennavigation usw. gewinnen. */
.jam :where(#content-core) a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.jam :where(#content-core) a:hover,
.jam :where(#content-core) a:focus-visible {
  text-decoration-thickness: 2px;
}

/* Titel der Einträge in Listen und Kacheln bleiben ohne Unterstreichung */
.jam #content-core a.url,
.jam #content-core .card-title a,
.jam #content-core .tileHeadline a {
  text-decoration: none;
}

.jam :focus-visible {
  outline: 2px solid var(--jam-red);
  outline-offset: 2px;
}

.jam h1,
.jam h2,
.jam h3,
.jam h4 {
  margin: 1.6em 0 0.5em;
  color: var(--jam-red);
  font-weight: 600;
  line-height: 1.2;
}

/* Die Serifenschrift gilt nur für H1 und H2 (sowie Logo und Zitat im Kopf) */
.jam h1,
.jam h2 {
  font-family: var(--jam-font-head);
  font-weight: 700;
}

.jam h1 {
  margin-top: 0;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
}

.jam h2 {
  font-size: 1.5rem;
}

.jam h3 {
  font-size: 1.2rem;
}

.jam h4 {
  font-size: 1.05rem;
}

.jam p,
.jam ul,
.jam ol,
.jam dl,
.jam table,
.jam blockquote,
.jam figure {
  margin: 0 0 1em;
}

.jam strong,
.jam b,
.jam dt,
.jam th {
  font-weight: 600;
}

.jam hr {
  border: 0;
  border-top: 1px solid var(--jam-rule);
  margin: 2rem 0;
}

.jam-wrap {
  width: min(100% - 2 * var(--jam-gap), var(--jam-width));
  margin-inline: auto;
}

.jam-visually-hidden,
.jam .visually-hidden,
.jam .sr-only,
.jam .hiddenStructure {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.jam-skip {
  position: absolute;
  left: -999rem;
  padding: 0.5rem 1rem;
  background: var(--jam-red);
  color: #fff !important;
}

.jam-skip:focus {
  left: 0.5rem;
  top: 0.5rem;
  z-index: 100;
}

/* ---------- Kopf: zentriert, weiß, haftet oben ---------- */

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

.jam-header__bar {
  position: relative;
  display: flex;
  justify-content: center;
  padding-block: 1.5rem 0.75rem;
  transition: padding 0.25s ease;
}

.jam-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: var(--jam-ink) !important;
  text-align: center;
  text-decoration: none;
}

.jam-logo__mark {
  flex: none;
  width: 2.4rem;
  height: auto;
  transition: width 0.25s ease;
}

.jam-logo__text {
  display: flex;
  flex-direction: column;
}

.jam-logo__name {
  font-family: var(--jam-font-head);
  font-size: clamp(1.05rem, 0.8rem + 1.2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.15;
  text-transform: uppercase;
  transition: font-size 0.25s ease;
}

.jam-logo__claim {
  margin-top: 0.4rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--jam-red);
  font-family: var(--jam-font-head);
  font-size: 0.95rem;
  font-weight: 400;
}

/* nach dem Scrollen (Klasse setzt jam.js): Logo klein in einer Zeile */

.jam-header.is-scrolled .jam-header__bar {
  align-items: center;
  min-height: 2.9rem;
  padding-block: 0.35rem 0;
}

.jam-header.is-scrolled .jam-logo {
  flex-direction: row;
  gap: 0.6rem;
}

.jam-header.is-scrolled .jam-logo__mark {
  width: 1.2rem;
}

.jam-header.is-scrolled .jam-logo__name {
  font-size: 1rem;
}

.jam-header.is-scrolled .jam-logo__claim {
  display: none;
}

.jam-nav-toggle {
  display: none;
}

.jam-nav-toggle__bars,
.jam-nav-toggle__bars::before,
.jam-nav-toggle__bars::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  margin-inline: auto;
  background: var(--jam-red);
  content: "";
}

.jam-nav-toggle__bars::before {
  transform: translateY(-6px);
}

.jam-nav-toggle__bars::after {
  transform: translateY(4px);
}

.jam-nav__inner {
  display: flex;
  justify-content: center;
}

.jam-nav__list,
.jam-nav__sub {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jam-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.jam-nav__list > li {
  position: relative;
  display: flex;
  align-items: center;
}

.jam-nav a {
  display: block;
  padding: 0.55rem 0.85rem;
  color: var(--jam-ink);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.jam-nav a:hover,
.jam-nav a:focus-visible,
.jam-nav .is-current > a {
  color: var(--jam-red);
  text-decoration: none;
}

.jam-nav__list > li.is-current > a {
  box-shadow: inset 0 -2px 0 var(--jam-red);
}

.jam-nav__opener {
  display: none;
}

.jam-nav__sub {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 20;
  display: none;
  min-width: 15rem;
  padding: 0.4rem 0;
  border-top: 2px solid var(--jam-red);
  background: #fff;
  box-shadow: 0 8px 20px rgb(0 0 0 / 12%);
  transform: translateX(-50%);
}

.jam-nav__list > li:hover > .jam-nav__sub,
.jam-nav__list > li:focus-within > .jam-nav__sub,
.jam-nav__list > li.is-open > .jam-nav__sub {
  display: block;
}

.jam-nav__sub a {
  padding: 0.4rem 1rem;
  font-weight: 400;
}

/* Startseite: gerastertes Porträt wie am Folder-Titel */

/* Bild (::before) und Weißverlauf (::after) liegen als eigene Ebenen unter
   dem Text, damit das Rasterbild getrennt vom Zitat einfliegen kann. */
.jam-hero {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.jam-hero::before,
.jam-hero::after {
  position: absolute;
  inset: 0;
  content: "";
}

.jam-hero::before {
  background: url("../img/raster-portrait.webp") right 22% / min(60rem, 75%) auto no-repeat;
}

.jam-hero::after {
  background: linear-gradient(
    90deg,
    #fff 0%,
    rgb(255 255 255 / 85%) 35%,
    rgb(255 255 255 / 0%) 70%
  );
}

.jam-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: clamp(16rem, 38vw, 28rem);
  padding-block: 2.5rem;
}

.jam-hero__quote {
  max-width: 30rem;
  margin: 0;
}

.jam-hero__quote p {
  margin: 0 0 0.75rem;
  color: var(--jam-red);
  font-family: var(--jam-font-head);
  font-size: clamp(1.3rem, 1rem + 1.6vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
}

.jam-hero__quote footer {
  color: var(--jam-muted);
  font-size: 0.95rem;
}

/* Front page: newest items as four cards below the hero */

.jam-news {
  padding-block: 2.5rem 1rem;
}

.jam .jam-news__title {
  margin: 0 0 1.25rem;
  text-align: center;
}

.jam-news__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--jam-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.jam-news__card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--jam-rule);
  background: #fff;
}

.jam-news__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.jam-news__body {
  padding: 1rem;
}

.jam .jam-news__body h3 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
}

/* long descriptions are cut after four lines so the cards stay even */
.jam-news__body p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  font-size: 0.95rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.jam-news__more {
  margin: 1.25rem 0 0;
  text-align: right;
}

@media (max-width: 62rem) {
  .jam-news__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 36rem) {
  .jam-news__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Auftritt der Startseite: Rasterbild fliegt von rechts ein, das Zitat von
   links, danach blendet der Inhalt darunter ein. Läuft einmal beim Laden. */

@keyframes jam-fly-in-right {
  from {
    opacity: 0;
    transform: translateX(12%);
  }
}

@keyframes jam-fly-in-left {
  from {
    opacity: 0;
    transform: translateX(-3rem);
  }
}

@keyframes jam-fade-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .jam-hero::before {
    animation: jam-fly-in-right 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  }

  .jam-hero__quote {
    animation: jam-fly-in-left 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s backwards;
  }

  .jam-news,
  .jam-front .jam-main {
    animation: jam-fade-in 0.8s ease-out 1.15s backwards;
  }
}

/* ---------- Inhalt und Spalten ---------- */

#global_statusmessage:empty,
#viewlet-above-content:empty {
  display: none;
}

.jam-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  padding-block: 2rem 4rem;
}

/* Barceloneta (nur für Angemeldete geladen) gibt den Spalten über
   body.col-one.col-content #portal-column-… feste Prozentbreiten, Reihenfolge
   und Abstände. Im Grid bestimmen die Spuren die Breite, deshalb !important. */
.jam #portal-column-content,
.jam #portal-column-one,
.jam #portal-column-two {
  order: 0 !important;
  flex: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

@media (min-width: 62rem) {
  .jam-main--one {
    grid-template-columns: 15rem minmax(0, 1fr);
  }

  .jam-main--two {
    grid-template-columns: minmax(0, 1fr) 17rem;
  }

  .jam-main--one.jam-main--two {
    grid-template-columns: 15rem minmax(0, 1fr) 17rem;
  }

  .jam-main--one #portal-column-one {
    grid-column: 1;
    grid-row: 1;
  }

  .jam-main--one #portal-column-content {
    grid-column: 2;
  }
}

.jam #content > header {
  margin-bottom: 1.5rem;
}

/* Titel und Verfasserzeile mittig über der Inhaltsspalte */
.jam #content > header > h1,
.jam #section-byline {
  text-align: center;
}

.jam #section-byline {
  margin-bottom: 1rem;
  color: var(--jam-muted);
  font-size: 0.9rem;
}

.jam .lead,
.jam .documentDescription {
  color: var(--jam-muted);
  font-size: 1.2rem;
}

.jam .discreet,
.jam .text-muted {
  color: var(--jam-muted);
  font-size: 0.9rem;
}

/* Brotkrumen */

.jam #viewlet-above-content {
  padding-top: 1rem;
}

/* ohne Hintergrund und Rahmen, auch wenn Barceloneta geladen ist (Angemeldete) */
.jam #portal-breadcrumbs,
.jam #portal-breadcrumbs .container {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.jam #portal-breadcrumbs {
  font-size: 85%;
}

.jam #portal-breadcrumbs a:hover,
.jam #portal-breadcrumbs a:focus-visible {
  color: var(--jam-red-dark);
}

.jam .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--jam-muted);
}

.jam .breadcrumb-item + .breadcrumb-item {
  padding-left: 0;
}

.jam .breadcrumb-item + .breadcrumb-item::before {
  float: none;
  padding-inline: 0.5rem;
  content: "/";
}

.jam-front #portal-breadcrumbs {
  display: none;
}

/* Verknüpfte Bilder und Anhänge (collective.behavior.relatedmedia) */

.jam #related-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.5rem;
}

.jam #related-images .image-item,
.jam #related-images img {
  display: block;
  width: 100%;
  margin: 0;
}

@media (min-width: 48rem) {
  .jam #related-images.floatRight,
  .jam #related-images.floatLeft {
    display: block;
    width: min(40%, 22rem);
  }

  .jam #related-images.floatRight {
    float: right;
    margin-left: 2rem;
  }

  .jam #related-images.floatLeft {
    float: left;
    margin-right: 2rem;
  }

  .jam #related-images.floatRight .image-item + .image-item,
  .jam #related-images.floatLeft .image-item + .image-item {
    margin-top: 0.75rem;
  }
}

.jam .list-unstyled {
  padding: 0;
  list-style: none;
}

.jam #related-attachments svg {
  vertical-align: -0.15em;
}

/* Tabellen (Lexikon, Abkürzungen) */

.jam table {
  width: 100%;
  border-collapse: collapse;
}

.jam th,
.jam td {
  padding: 0.4rem 0.75rem 0.4rem 0;
  border-bottom: 1px solid var(--jam-rule);
  text-align: left;
  vertical-align: top;
}

.jam td > p:last-child {
  margin-bottom: 0;
}

.jam table.invisible th,
.jam table.invisible td {
  border: 0;
}

/* Bilder aus dem Editor */

.jam figure {
  max-width: 100%;
}

.jam figcaption {
  color: var(--jam-red);
  font-size: 0.9rem;
}

.jam .image-left {
  float: left;
  margin: 0.3rem 1.5rem 1rem 0;
}

.jam .image-right {
  float: right;
  margin: 0.3rem 0 1rem 1.5rem;
}

.jam #content-core::after {
  display: block;
  clear: both;
  content: "";
}

/* Listen und Kacheln */

.jam .entries,
.jam .listing-items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jam article.entry,
.jam .tileItem {
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--jam-rule);
}

.jam article.entry header,
.jam .tileHeadline {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}

.jam article.entry p {
  margin: 0.15rem 0 0;
}

/* Schlankes Raster nur für Besucher. Angemeldete haben das Bootstrap-Raster
   aus Barceloneta; dort würde es z. B. die Übersicht der Website-
   Konfiguration auf eine Spalte zwingen. */
.jam.userrole-anonymous .row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jam-gap);
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.jam.userrole-anonymous .row > * {
  flex: 1 1 100%;
  min-width: 0;
}

@media (min-width: 48rem) {
  .jam.userrole-anonymous .row-cols-md-2 > * {
    flex: 0 0 calc((100% - var(--jam-gap)) / 2);
  }

  .jam.userrole-anonymous .row-cols-md-3 > * {
    flex: 0 0 calc((100% - 2 * var(--jam-gap)) / 3);
  }

  .jam.userrole-anonymous dl.row > dt {
    flex: 0 0 11rem;
  }

  .jam.userrole-anonymous dl.row > dd {
    flex: 1 1 calc(100% - 11rem - var(--jam-gap));
  }
}

.jam.userrole-anonymous dl.row {
  gap: 0.25rem var(--jam-gap);
}

.jam.userrole-anonymous dl.row > dd {
  margin: 0;
}

/* Website-Konfiguration: Einträge ab mittlerer Breite sechsspaltig */
@media (min-width: 62rem) {
  .jam .configlets.row > * {
    flex: 0 0 auto;
    width: calc(100% / 6);
  }
}

.jam .card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--jam-rule);
  background: #fff;
}

.jam .card.h-100 {
  height: 100%;
}

/* Kachelansicht: Bild über dem Text (für Besucher ohne Bootstrap) */
.jam .order-first {
  order: -1;
}

.jam .card-img-top img,
.jam img.card-img-top {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.jam .card-body {
  padding: 1rem;
}

/* Kein Abstand unter dem letzten Element der Karte (z. B. Beschreibung in
   der Kachelansicht); !important wegen der Bootstrap-Klassen mb-*. */
.jam .card-body > :last-child {
  margin-bottom: 0 !important;
}

.jam .card-title,
.jam .card-body h2,
.jam .card-body h3 {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
}

.jam .badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  background: var(--jam-red);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 400;
}

/* Seitennavigation der Listen */

.jam .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.jam .page-link {
  display: block;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--jam-rule);
  text-decoration: none;
}

.jam .pagination .active > *,
.jam .pagination [aria-current] {
  border-color: var(--jam-red);
  background: var(--jam-red);
  color: #fff;
}

/* Portlets (Navigation, Lexikon-Filter) */

.jam .portletWrapper + .portletWrapper {
  margin-top: 1.5rem;
}

.jam .portlet {
  border: 0;
}

/* Bootstrap (Angemeldete): Kopf und Fuß von Karten ohne grauen Hintergrund */
.jam .card {
  --bs-card-cap-bg: transparent;
}

.jam .portlet .card-header,
.jam .portletHeader {
  padding: 0.6rem 0 0.4rem;
  color: var(--jam-red);
  font-weight: 600;
}

.jam .portlet .card-header a {
  color: inherit;
  text-decoration: none;
}

.jam .portlet .card-body {
  padding: 0;
}

.jam .portlet ul,
.jam .portlet ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jam .portlet li {
  padding-block: 0.15rem;
}

.jam .portlet li ul {
  padding-left: 1rem;
}

.jam .portlet a:hover {
  text-decoration: underline;
}

.jam .portlet .selected > a,
.jam .portlet li.selected {
  font-weight: 600;
}

/* Navigationsportlet: aktueller Punkt bzw. der Punkt, in dem man sich
   befindet, mit rotem Strich am linken Rand */
.jam .portletNavigationTree .navTree a {
  display: block;
  padding-left: 0.6rem;
  border-left: 3px solid transparent;
  color: var(--jam-ink);
}

.jam .portletNavigationTree .navTree a:hover {
  color: var(--jam-red);
}

.jam .portletNavigationTree .navTree a.navTreeCurrentItem,
.jam .portletNavigationTree .navTree a.navTreeItemInPath {
  border-left-color: var(--jam-red);
  color: var(--jam-red);
  font-weight: 600;
}

.jam .portlet svg,
.jam .portletNavigationTree img {
  display: none;
}

/* collectionfilter: Radiobuttons mit Beschriftung in einer Zeile */
.jam .collectionFilter .form-check {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
}

.jam .collectionFilter .form-check-label {
  margin: 0;
}

/* Formulare (Suche, EasyForm, Filter) */

/* Für Besucher (ohne Bootstrap) bildet das Theme die Bootstrap-Felder nach:
   gleiche Abstände, Rahmen und Rundung wie .form-control / .form-select.
   Angemeldete bekommen die Felder direkt aus Barceloneta. */
.jam.userrole-anonymous input[type="text"],
.jam.userrole-anonymous input[type="search"],
.jam.userrole-anonymous input[type="email"],
.jam.userrole-anonymous input[type="password"],
.jam.userrole-anonymous input[type="url"],
.jam.userrole-anonymous input[type="tel"],
.jam.userrole-anonymous input[type="number"],
.jam.userrole-anonymous input[type="date"],
.jam.userrole-anonymous textarea,
.jam.userrole-anonymous select {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0.375rem 0.75rem;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  background-color: #fff;
  color: var(--jam-ink);
  font: inherit;
  line-height: 1.5;
  appearance: none;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.jam.userrole-anonymous select:not([multiple]) {
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  background-repeat: no-repeat;
}

.jam.userrole-anonymous input[type="checkbox"],
.jam.userrole-anonymous input[type="radio"] {
  accent-color: var(--jam-red);
}

.jam.userrole-anonymous label,
.jam.userrole-anonymous .form-label {
  display: inline-block;
  margin-bottom: 0.5rem;
}

/* Fokus in der Hausfarbe statt Bootstrap-Blau, für alle Felder */
.jam input:focus,
.jam textarea:focus,
.jam select:focus,
.jam .form-control:focus,
.jam .form-select:focus,
.jam .form-check-input:focus {
  border-color: var(--jam-red);
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgb(135 14 18 / 25%);
}

.jam .form-check-input:checked {
  border-color: var(--jam-red);
  background-color: var(--jam-red);
}

.jam .field,
.jam .mb-3 {
  margin-bottom: 1rem;
}

.jam .form-text,
.jam .formHelp {
  display: block;
  color: var(--jam-muted);
  font-size: 0.9rem;
}

.jam .required::after {
  color: var(--jam-red);
  content: " *";
}

.jam .invalid-feedback,
.jam .fieldErrorBox {
  color: var(--jam-red);
  font-weight: 600;
}

/* Eigene Schaltflächen nur für Besucher. Angemeldete bekommen die
   Bootstrap-Schaltflächen aus Barceloneta, sonst verformt das Theme die
   Bedienelemente von Toolbar, Contentbrowser, TinyMCE und Blockeditor. */
.jam.userrole-anonymous button,
.jam.userrole-anonymous .btn,
.jam.userrole-anonymous input[type="submit"],
.jam.userrole-anonymous input[type="button"] {
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--jam-red);
  border-radius: 0;
  background: var(--jam-red);
  color: #fff;
  font: inherit;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
}

.jam.userrole-anonymous .btn-secondary,
.jam.userrole-anonymous .btn-outline-secondary,
.jam.userrole-anonymous input[type="reset"] {
  border-color: var(--jam-muted);
  background: #fff;
  color: var(--jam-text);
}

/* Angemeldet: nur die Hauptschaltflächen in der Hausfarbe, Form und
   Abstände bleiben bei Bootstrap. */
.jam.userrole-authenticated .btn-primary {
  --bs-btn-bg: var(--jam-red);
  --bs-btn-border-color: var(--jam-red);
  --bs-btn-hover-bg: var(--jam-red-dark);
  --bs-btn-hover-border-color: var(--jam-red-dark);
  --bs-btn-active-bg: var(--jam-red-dark);
  --bs-btn-active-border-color: var(--jam-red-dark);
  --bs-btn-disabled-bg: var(--jam-red);
  --bs-btn-disabled-border-color: var(--jam-red);
}

.jam .jam-nav-toggle,
.jam .jam-nav__opener {
  padding: 0;
  border: 1px solid var(--jam-rule);
  background: none;
  color: var(--jam-red);
}

/* Suchseite (@@search): Plone-Markup, eigene schlanke Darstellung */

.jam #searchform .input-group {
  display: flex;
  max-width: 40rem;
}

.jam #searchform .input-group > input {
  flex: 1;
  width: auto;
}

.jam #searchform #search-term {
  margin: 1.5rem 0 1rem;
  font-size: 1.6rem;
}

.jam #searchform #search-term .text-muted {
  color: var(--jam-muted);
  font-size: inherit;
}

/* Zeile mit Trefferzahl, Filter und Sortierung */
.jam #searchform > .d-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
}

.jam #searchform .dropdown-menu .d-flex {
  display: flex;
}

.jam #searchform .flex-fill {
  flex: 1 1 auto;
}

.jam #searchform .nav-link {
  color: var(--jam-text);
  text-decoration: none;
}

.jam #searchform .dropdown-toggle {
  color: var(--jam-red);
}

.jam #searchform .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.35rem;
  border: 0.3em solid transparent;
  border-top-color: currentcolor;
  border-bottom: 0;
  vertical-align: 0.15em;
  content: "";
}

.jam #searchform .dropdown {
  position: relative;
}

.jam #searchform .dropdown-menu {
  display: none;
  margin: 0;
  padding: 0.75rem 0;
  border: 0;
  border-top: 2px solid var(--jam-red);
  border-radius: 0;
  background: #fff;
  box-shadow: 0 8px 20px rgb(0 0 0 / 12%);
  list-style: none;
}

.jam #searchform .dropdown-menu.show {
  display: block;
}

/* Ohne Plone-Bundle (Besucher) positioniert das Theme die Menüs selbst */
.jam.userrole-anonymous #searchform .dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 10;
}

.jam #searchform .dropdown-menu ul {
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}

.jam #searchform .dropdown-menu .mx-3 {
  margin: 0 1rem;
}

.jam #searchform .text-nowrap {
  white-space: nowrap;
}

.jam #searchform .fw-bold {
  font-weight: 600;
}

.jam #searchform .form-check {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
}

.jam #searchform .form-check label {
  margin: 0;
  font-weight: 400;
}

.jam #searchform .dropdown-item {
  display: block;
  padding: 0.3rem 1rem;
  color: var(--jam-text);
  text-decoration: none;
  white-space: nowrap;
}

.jam #searchform .dropdown-item:hover,
.jam #searchform .dropdown-item:focus-visible,
.jam #searchform .dropdown-item.active {
  color: var(--jam-red);
}

.jam #search-results.is-loading {
  opacity: 0.5;
}

.jam .searchResults {
  margin: 1rem 0 0;
  padding: 0;
  border-top: 1px solid var(--jam-rule);
  list-style: none;
}

.jam .searchResults > li {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem 0;
  border: 0;
  border-bottom: 1px solid var(--jam-rule);
  border-radius: 0;
  background: none;
  font-size: 1rem;
}

.jam .searchResults > li::before {
  content: none;
}

.jam .searchResults .result-title {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.25;
}

.jam .searchResults .result-title a {
  text-decoration: none;
}

.jam .searchResults .croppedDescription {
  margin: 0.3rem 0;
  font-size: 1rem;
  font-weight: 400;
}

.jam .searchResults cite {
  display: block;
  color: var(--jam-muted);
  font-size: 0.9rem;
  font-style: normal;
}

.jam .searchResults .thumb-icon {
  max-width: 6rem;
  height: auto;
}

@media (max-width: 40rem) {
  .jam.userrole-anonymous #searchform .dropdown-menu {
    right: auto;
    left: 0;
  }

  .jam #searchform .dropdown-menu .d-flex {
    flex-direction: column;
  }
}

/* Meldungen */

.jam .alert,
.jam .portalMessage {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--jam-red);
  background: var(--jam-red-tint);
}

/* ---------- Fuß: rot, Punktraster als dunklere Struktur ---------- */

.jam-footer {
  margin-top: 2rem;
  background: var(--jam-red);
  color: #fff;
}

/* Barceloneta (logged-in users) styles #portal-footer-wrapper dark grey,
   centred and padded. Same red footer for everyone; the raster band runs to
   the edge, only the text block carries the spacing. */
.jam #portal-footer-wrapper {
  padding: 0;
  background: var(--jam-red);
  color: #fff;
  text-align: left;
}

/* Raster band closing the page: the dots darken the footer colour */
.jam-footer__band {
  height: clamp(3.5rem, 9vw, 7.5rem);
  background: url("../img/raster-band.webp") center / cover no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.6;
}

.jam-footer__block {
  padding-block: 1.5rem;
}

.jam-footer a,
.jam-footer a:hover,
.jam-footer a:focus-visible {
  color: #fff;
}

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

.jam-footer__cols {
  display: grid;
  gap: 2rem;
}

@media (min-width: 48rem) {
  .jam-footer__cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

.jam .jam-footer__cols h2 {
  margin: 0 0 0.4rem;
  color: #fff;
  font-size: 1.1rem;
}

.jam-footer__cols p {
  margin: 0;
  font-size: 0.95rem;
}

.jam-footer__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(255 255 255 / 35%);
  font-size: 0.9rem;
}

.jam-footer__meta ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Schmale Bildschirme ---------- */

@media (max-width: 61.99rem) {
  .jam-header__bar {
    padding-block: 0.75rem 0.5rem;
    padding-inline: 3.25rem;
  }

  .jam-logo {
    gap: 0.35rem;
  }

  .jam-logo__mark {
    width: 1.6rem;
  }

  .jam-logo__claim {
    font-size: 0.8rem;
  }

  .jam .jam-nav-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    width: 2.75rem;
    height: 2.75rem;
    transform: translateY(-50%);
    cursor: pointer;
  }

  .jam-nav {
    display: none;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    border-top: 1px solid var(--jam-rule);
  }

  .jam-nav.is-open {
    display: block;
  }

  .jam-nav__inner {
    flex-direction: column;
    padding-block: 0.25rem 1rem;
  }

  .jam-nav__list {
    flex-direction: column;
  }

  .jam-nav__list > li {
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom: 1px solid var(--jam-rule);
  }

  .jam-nav__list > li > a {
    flex: 1;
    padding-inline: 0;
  }

  .jam-nav__list > li.is-current > a {
    box-shadow: none;
  }

  .jam .jam-nav__opener {
    display: block;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    cursor: pointer;
  }

  .jam-nav__opener::before {
    content: "+";
    font-size: 1.4rem;
  }

  .is-open > .jam-nav__opener::before {
    content: "–";
  }

  .jam-nav__sub {
    position: static;
    flex: 0 0 100%;
    padding: 0 0 0.5rem 1rem;
    border-top: 0;
    box-shadow: none;
    transform: none;
  }

  .jam-nav__list > li:hover > .jam-nav__sub,
  .jam-nav__list > li:focus-within > .jam-nav__sub {
    display: none;
  }

  .jam-nav__list > li.is-open > .jam-nav__sub {
    display: block;
  }

  .jam-hero::before {
    background: url("../img/raster-portrait-800.webp") center 20% / cover no-repeat;
  }

  .jam-hero::after {
    background: linear-gradient(180deg, rgb(255 255 255 / 70%), rgb(255 255 255 / 85%));
  }
}

/* ---------- Angemeldet: Platz für die Plone-Toolbar, Barceloneta zähmen ---------- */

body.jam.plone-toolbar-left .jam-header,
body.jam.plone-toolbar-left .jam-footer {
  margin: 0;
}

body.jam.userrole-authenticated {
  font-family: var(--jam-font-body);
  font-weight: 400;
}

@media print {
  .jam-nav,
  .jam-nav-toggle,
  .jam-footer__band,
  #portal-column-one,
  #portal-column-two,
  #edit-zone {
    display: none !important;
  }

  .jam-footer__block {
    background: none;
    color: inherit;
  }
}