/* ============================================================
   KALEIDOSKOP SONDERPÄDAGOGIK – Custom OJS CSS (v3 Fix)
   Kohärenz mit PDF-Corporate-Design (Band 1, 2026)
   Schrift: Jost (Google Fonts, Century Gothic-nah)
   Farben: direkt aus SVG-Logo extrahiert
   --k-orange : #f39048
   --k-pink   : #d65c9e
   --k-blue   : #68c0ed
   ============================================================ */

/* --- Google Font Import --- */
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

/* --- Design Tokens --- */
:root {
  --k-orange : #f39048;
  --k-pink   : #d65c9e;
  --k-blue   : #68c0ed;
  --k-dark   : #1a1a1a;
  --k-mid    : #4a4a4a;
  --k-light  : #f7f7f7;
  --k-white  : #ffffff;
  --k-border : #e0e0e0;
  --k-font   : 'Jost', 'Century Gothic', Arial, sans-serif;
}

/* ============================================================
   GLOBAL
   ============================================================ */
body {
  font-family: var(--k-font);
  font-weight: 400;
  color: var(--k-dark);
  background-color: var(--k-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--k-font);
  font-weight: 500;
  letter-spacing: 0.02em;
}

a {
  color: var(--k-blue);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--k-pink);
}

/* ============================================================
   HEADER – dreifarbiger Akzentstreifen oben
   ============================================================ */
.pkp_head_wrapper {
  border-top: 4px solid transparent;
  border-image: linear-gradient(
    to right,
    var(--k-orange) 33.3%,
    var(--k-pink)   33.3% 66.6%,
    var(--k-blue)   66.6%
  ) 1;
}

.pkp_site_name,
.pkp_site_name_logo {
  display: block;
  padding: 16px 0 10px;
}

.pkp_site_name img,
.pkp_site_name_logo img {
  height: 50px;
  width: auto;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.pkp_navigation_primary {
  border-bottom: 0.5px solid var(--k-border);
}

.pkp_navigation_primary li a,
ul.pkp_navigation_primary > li > a {
  font-family: var(--k-font);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k-mid);
  padding: 8px 11px;
  border-bottom: 2px solid transparent;
  display: inline-block;
  transition: color 0.15s, border-color 0.15s;
}

ul.pkp_navigation_primary > li:nth-child(1) > a:hover {
  color: var(--k-orange);
  border-bottom-color: var(--k-orange);
  background-color: rgba(243, 144, 72, 0.10);
}
ul.pkp_navigation_primary > li:nth-child(2) > a:hover {
  color: var(--k-pink);
  border-bottom-color: var(--k-pink);
  background-color: rgba(214, 92, 158, 0.10);
}
ul.pkp_navigation_primary > li:nth-child(3) > a:hover {
  color: var(--k-blue);
  border-bottom-color: var(--k-blue);
  background-color: rgba(104, 192, 237, 0.12);
}
ul.pkp_navigation_primary > li:nth-child(4) > a:hover {
  color: var(--k-orange);
  border-bottom-color: var(--k-orange);
  background-color: rgba(243, 144, 72, 0.10);
}
ul.pkp_navigation_primary > li:nth-child(5) > a:hover {
  color: var(--k-pink);
  border-bottom-color: var(--k-pink);
  background-color: rgba(214, 92, 158, 0.10);
}

ul.pkp_navigation_primary > li.current > a {
  color: var(--k-dark);
  border-bottom: 2px solid var(--k-blue);
}

.pkp_navigation_primary .pkp_nav_has_sub ul {
  background: var(--k-white);
  border: 0.5px solid var(--k-border);
  border-top: 3px solid var(--k-blue);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.pkp_navigation_primary .pkp_nav_has_sub ul li a:hover {
  background-color: var(--k-light);
  color: var(--k-blue);
  border-bottom: none;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.pkp_navigation_breadcrumbs {
  font-size: 0.78rem;
  color: var(--k-mid);
  letter-spacing: 0.02em;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--k-border);
}

.pkp_navigation_breadcrumbs a {
  color: var(--k-mid);
}

.pkp_navigation_breadcrumbs a:hover {
  color: var(--k-blue);
}

/* ============================================================
   HAUPTINHALT
   ============================================================ */
.pkp_structure_main {
  max-width: 760px;
}

/* FIX PROBLEM 2: h1 border-bottom entfernt, da es eine Linie
   oberhalb der "Über die Zeitschrift"-Sektion erzeugt hat */
.pkp_structure_main h1 {
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
}

/* ============================================================
   STARTSEITE – Journal-Beschreibung ("Über die Zeitschrift")
   ============================================================ */
/* FIX PROBLEM 1: Margin reduziert für kompaktere Abstände */
.homepage_about {
  margin: 0.4rem 0 0.6rem;
}

.homepage_about h2 {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--k-mid);
  margin-bottom: 0.5rem;
  border: none;
  padding: 0;
}

.homepage_about p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--k-mid);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  border-left: 3px solid var(--k-blue);
  padding-left: 1.1rem;
  margin-bottom: 0;
}

.homepage_about p strong {
  color: var(--k-dark);
}

/* ============================================================
   "ÜBER DIE ZEITSCHRIFT" – eigenständige Unterseite
   ============================================================ */
.page_about p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--k-mid);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  margin-bottom: 1.2rem;
}

.page_about p strong {
  color: var(--k-dark);
}

.page_about .cmp_edit_link {
  display: block;
  width: fit-content;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k-blue);
  background: var(--k-light);
  border: 0.5px solid var(--k-border);
  border-radius: 3px;
  padding: 4px 10px;
  margin: 0 0 1.2rem;
}

.page_about .cmp_edit_link:hover {
  color: var(--k-pink);
  border-color: var(--k-pink);
}

.pkp_structure_main .description a.read-more,
.pkp_structure_main .description a:last-child {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--k-blue);
  margin-top: 0.5rem;
}

.pkp_structure_main .description a.read-more:hover,
.pkp_structure_main .description a:last-child:hover {
  color: var(--k-pink);
}

/* ============================================================
   STARTSEITE – Ausgabe-Block (Cover + Beiträge)
   ============================================================ */
.current_issue h2 {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--k-mid);
  margin-bottom: 4px;
}

/* FIX PROBLEM 1: Margin reduziert */
.current_issue_title {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 0.6rem;
}

/* --- Cover-Bereich kompakt --- */
/* FIX PROBLEM 1: gap reduziert von 6px auf 2px */
.obj_issue_toc {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.obj_issue_toc .heading {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.obj_issue_toc .heading a.cover {
  flex-shrink: 0;
  display: block;
}

.obj_issue_toc .heading a.cover img {
  width: 110px;
  max-height: 155px;
  height: auto;
  border: 0.5px solid var(--k-border);
  box-shadow: 0 3px 14px rgba(0,0,0,0.12);
  display: block;
}

.obj_issue_toc .published {
  font-size: 0.82rem;
  color: var(--k-mid);
}

.obj_issue_toc .published .label {
  font-weight: 600;
  color: var(--k-dark);
  margin-right: 4px;
}

/* --- "Komplette Ausgabe" --- */
.obj_issue_toc .galleys {
  margin-top: 2px;
}

.obj_issue_toc .galleys h3 {
  display: none;
}

.obj_issue_toc .galleys .galleys_links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.obj_issue_toc .galleys a.obj_galley_link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--k-pink);
  color: var(--k-white) !important;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 3px;
  transition: background 0.15s;
}

.obj_issue_toc .galleys a.obj_galley_link:hover {
  background: var(--k-dark);
  color: var(--k-white) !important;
}

/* --- Artikelliste --- */
/* FIX PROBLEM 3: border-top entfernt, margin/padding reduziert */
.obj_issue_toc .sections {
  margin-top: 0.3rem;
  padding-top: 0;
}

/* FIX PROBLEM 3: OJS Default-Theme Override für .section */
.obj_issue_toc .section {
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
}

.obj_issue_toc .sections .section > h3 {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--k-mid);
  opacity: 0.7;
  margin-bottom: 6px;
}

/* ============================================================
   ARTIKELLISTE
   ============================================================ */
.cmp_article_list.articles {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* FIX PROBLEM 1 & 3: padding-top reduziert, border-bottom entfernt
   (wird durch border-left der .obj_article_summary ersetzt) */
.cmp_article_list.articles > li {
  padding: 6px 0 0 0;
  margin: 0;
  list-style: none;
}

.cmp_article_list.articles > li:last-child {
  border-bottom: none;
}

/* --- Einzelner Artikel --- */
.obj_article_summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0 10px 14px;
  border-left: 4px solid var(--k-border);
  transition: border-color 0.15s, background 0.15s;
}

.obj_article_summary:hover {
  background: var(--k-light);
}

/* Typkennzeichnung als ::before auf .obj_article_summary */
.obj_article_summary::before {
  flex-shrink: 0;
  width: 92px;
  padding-top: 1px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.cmp_article_list.articles > li:nth-child(1) .obj_article_summary {
  border-left-color: var(--k-orange);
}
.cmp_article_list.articles > li:nth-child(1) .obj_article_summary::before {
  content: 'Editorial:';
  color: var(--k-orange);
}

.cmp_article_list.articles > li:nth-child(2) .obj_article_summary,
.cmp_article_list.articles > li:nth-child(3) .obj_article_summary,
.cmp_article_list.articles > li:nth-child(4) .obj_article_summary {
  border-left-color: var(--k-blue);
}
.cmp_article_list.articles > li:nth-child(2) .obj_article_summary::before,
.cmp_article_list.articles > li:nth-child(3) .obj_article_summary::before,
.cmp_article_list.articles > li:nth-child(4) .obj_article_summary::before {
  content: 'Bachelorarbeit:';
  color: var(--k-blue);
}

.obj_article_summary .title {
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0 4px;
  flex: 1;
  min-width: 0;
}

.obj_article_summary .title a {
  color: var(--k-dark);
}

.obj_article_summary .title a:hover {
  color: var(--k-blue);
}

.obj_article_summary .title .subtitle {
  display: block;
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--k-mid);
  margin-top: 2px;
}

.obj_article_summary .meta {
  display: flex;
  gap: 14px;
  align-items: baseline;
  flex-shrink: 0;
}

.obj_article_summary .authors {
  font-size: 0.8rem;
  color: var(--k-mid);
}

.obj_article_summary .pages {
  font-size: 0.75rem;
  color: var(--k-mid);
  opacity: 0.65;
}

/* PDF-Link pro Artikel */
.obj_article_summary .galleys_links {
  list-style: none;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.obj_article_summary a.obj_galley_link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 0.5px solid var(--k-border);
  border-radius: 3px;
  padding: 4px 9px;
  transition: all 0.15s;
}

.cmp_article_list.articles > li:nth-child(1) a.obj_galley_link {
  color: var(--k-orange);
}
.cmp_article_list.articles > li:nth-child(2) a.obj_galley_link,
.cmp_article_list.articles > li:nth-child(3) a.obj_galley_link,
.cmp_article_list.articles > li:nth-child(4) a.obj_galley_link {
  color: var(--k-blue);
}

.cmp_article_list.articles > li:nth-child(1) a.obj_galley_link:hover {
  background: var(--k-orange);
  border-color: var(--k-orange);
  color: var(--k-white) !important;
}
.cmp_article_list.articles > li:nth-child(2) a.obj_galley_link:hover,
.cmp_article_list.articles > li:nth-child(3) a.obj_galley_link:hover,
.cmp_article_list.articles > li:nth-child(4) a.obj_galley_link:hover {
  background: var(--k-blue);
  border-color: var(--k-blue);
  color: var(--k-white) !important;
}

/* ============================================================
   ARTIKEL-DETAILSEITE
   ============================================================ */
.obj_article_details .page_title {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: 0.3rem;
}

.obj_article_details .subtitle {
  font-size: 1rem;
  font-weight: 300;
  color: var(--k-mid);
  margin-bottom: 1.4rem;
}

.obj_article_details .row {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.obj_article_details .main_entry {
  flex: 1;
  min-width: 0;
}

.obj_article_details .entry_details {
  width: 200px;
  flex-shrink: 0;
}

.obj_article_details .item.authors {
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--k-border);
  margin-bottom: 1.2rem;
}

.obj_article_details .item.authors ul.authors {
  list-style: none;
  margin: 0;
  padding: 0;
}

.obj_article_details .item.authors .name {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--k-dark);
}

.obj_article_details .main_entry .item > .label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--k-blue);
  margin-bottom: 0.5rem;
  display: block;
}

.obj_article_details .item.keywords {
  margin-bottom: 1.4rem;
}

.obj_article_details .item.keywords .value {
  font-size: 0.85rem;
  color: var(--k-mid);
  line-height: 1.6;
}

.obj_article_details .item.abstract p {
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--k-mid);
  border-left: 3px solid var(--k-blue);
  padding-left: 1rem;
  text-align: justify;
  hyphens: auto;
}

.obj_article_details .entry_details .item {
  margin-bottom: 1.3rem;
  padding-bottom: 1.1rem;
  border-bottom: 0.5px solid var(--k-border);
}

.obj_article_details .entry_details .item:last-child {
  border-bottom: none;
}

.obj_article_details .entry_details .cover_image img {
  width: 100%;
  border: 0.5px solid var(--k-border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.obj_article_details .entry_details .label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--k-mid);
  margin-bottom: 0.3rem;
  display: block;
}

.obj_article_details .entry_details .value,
.obj_article_details .entry_details .item.issue .value a.title {
  font-size: 0.82rem;
  color: var(--k-dark);
}

.obj_article_details .item.galleys .galleys_links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.obj_article_details .item.galleys a.obj_galley_link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--k-orange);
  color: var(--k-white) !important;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 3px;
  transition: background 0.15s;
}

.obj_article_details .item.galleys a.obj_galley_link:hover {
  background: var(--k-pink);
  color: var(--k-white) !important;
}

.obj_article_details .item.copyright {
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--k-mid);
}

.obj_article_details .item.copyright a {
  color: var(--k-blue);
}

/* ============================================================
   FORMULARE & BUTTONS
   ============================================================ */
.pkp_form input[type="submit"],
button.submitFormButton {
  background: var(--k-blue);
  color: var(--k-white);
  font-family: var(--k-font);
  font-weight: 500;
  letter-spacing: 0.05em;
  border: none;
  border-radius: 3px;
  padding: 0.5rem 1.2rem;
  cursor: pointer;
  transition: background 0.15s;
}

.pkp_form input[type="submit"]:hover,
button.submitFormButton:hover {
  background: var(--k-pink);
}

/* ============================================================
   BEITRAGSEINREICHUNG – Datenschutzhinweis
   ============================================================ */
.page_submissions .privacyStatement,
.pkp_page_submissions .privacyStatement,
#submissionPrivacyStatement,
.privacyStatement {
  margin-top: 2.5rem;
  padding: 1rem 1.1rem;
  background: var(--k-light);
  border-left: 3px solid var(--k-border);
  border-radius: 4px;
}

.privacyStatement h2,
.privacyStatement .label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--k-mid);
  margin-bottom: 0.5rem;
}

.privacyStatement p,
.privacyStatement div {
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--k-mid);
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.pkp_structure_sidebar .pkp_block {
  border-top: 3px solid var(--k-orange);
  margin-bottom: 1.5rem;
}

.pkp_structure_sidebar .pkp_block:nth-child(2) {
  border-top-color: var(--k-pink);
}

.pkp_structure_sidebar .pkp_block:nth-child(3) {
  border-top-color: var(--k-blue);
}

.pkp_structure_sidebar .pkp_block .title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--k-mid);
  margin-bottom: 0.7rem;
}

.pkp_structure_sidebar a {
  font-size: 0.82rem;
  color: var(--k-mid);
  display: block;
  padding: 3px 0;
}

.pkp_structure_sidebar a:hover {
  color: var(--k-blue);
}

/* ============================================================
   FOOTER
   ============================================================ */
.pkp_structure_footer::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(
    to right,
    var(--k-orange) 33.3%,
    var(--k-pink)   33.3% 66.6%,
    var(--k-blue)   66.6%
  );
  margin-bottom: 0.8rem;
}

.pkp_structure_footer {
  font-size: 0.75rem;
  border-top: 0.5px solid var(--k-border);
  letter-spacing: 0.02em;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .pkp_structure_main h1 {
    font-size: 1.2rem;
  }

  .obj_article_details h1.title {
    font-size: 1.1rem;
  }

  .pkp_navigation_primary li a {
    font-size: 0.75rem;
    padding: 6px 7px;
  }

  .obj_issue_toc {
    flex-direction: column;
  }

  .obj_issue_toc .heading a.cover img {
    width: 120px;
  }
}