@charset "UTF-8";
@import "../../../plugins/themes/modpub-theme/fonts/ibm-plex-sans/css/ibm-plex-sans-all.css";
/* Lokale Einbindung IBM Plex Sans (kein Google Fonts, DSGVO-konform) */

/* ============================================================
   API Magazin – Custom Theme
   Fokus: Farben, Typografie, Barrierefreiheit
   ============================================================ 

Farbwerte:
   Primärgrün: #2f6f58
   Hovergrün:  #2c7a5e
   Hintergrund: #f6faf7
   Fokus: #f4c430
	=============================================================
   1. Grundlayout & Typografie
   ============================================================ */

html {
  scroll-behavior: smooth;
}

body {
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #222222;
  background-color: #f6faf7;
  margin: 0;
  padding: 0;
}


/* ============================================================
   2. Links & Fokus
   ============================================================ */	

a {
	color: #2f6f58;
	text-decoration: underline;
}

a:hover,
a:focus {
  color: #2c7a5e;
  background-color: #eef7f2;
}

/* ============================================================
   Tastaturfokus (Barrierefreiheit)
   ============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #f4c430;
  outline-offset: 3px;
}

/* Navigation: box-shadow statt outline (OJS-sicher) */
.pkp_site_nav_menu a:focus,
.pkp_site_nav_menu a:focus-visible {
  box-shadow: 0 0 0 3px #f4c430;
}
/* ============================================================
   Tastaturfokus: Logo (Link zur Startseite) box-shadow: inset, da sonst der obere Teil des Rahmens abgeschnitten wird von User-Nav-Zeile
   ============================================================ */

.pkp_site_name a:focus,
.pkp_site_name a:focus-visible {
  box-shadow: inset 0 0 0 3px #f4c430;
  outline: none;
}

.pkp_site_name {
  text-align: left;
}

.pkp_site_name a {
  display: inline-block;
}


/* ============================================================
   3. Header & Navigation (OJS)
   ============================================================ */

.pkp_structure_head {
  background-color: #f6faf7;
  border-bottom: 1px solid #dddddd;
}

/* Logo nur skalieren, nicht verschieben */
.pkp_site_name img {
  max-width: 400px;
  height: auto;
}

/* Navigation */
.pkp_navigation_primary > li > a {
  font-weight: 600;
  color: #222222;
  text-decoration: none;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
  background-color: #eef7f2;
  color: #2f6f58;
}

/* Dropdown */
.pkp_navigation_primary ul {
  background-color: #f6faf7;
  border: 1px solid #dddddd;
}

.pkp_navigation_primary ul li a:hover {
  background-color: #eef7f2;
  color: #2f6f58;
}

/* User-Navigation – Hintergrund an Theme anpassen */

.pkp_navigation_user {
  background-color: #f6faf7;
}
.pkp_navigation_user > li > a {
  font-size: 0.95rem;
  font-weight: 500;
}
}
/* User-Navigation: Hover + Fokus sichtbar */
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus,
.pkp_navigation_user > li > a:focus-visible {
  background-color: #eef7f2; 
  color: #3a8d6d;
}

/* ============================================================
   Suche – Link (a) Hover & Fokus
   ============================================================ */

a.pkp_search_desktop:hover,
a.pkp_search_desktop:focus,
a.pkp_search_desktop:focus-visible {
  color: #2c7a5e;
}

a.pkp_search_desktop:hover .fa-search,
a.pkp_search_desktop:focus .fa-search,
a.pkp_search_desktop:focus-visible .fa-search {
  color: #2c7a5e;
}

/* ============================================================
   4. Inhalte / Artikel
   ============================================================ */

.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3 {
        font-weight: 700;
        color: #1f3d33;
        line-height: 1.3;
        font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
}

.obj_article_details .main_entry .item .label {
        font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

p {
  margin-bottom: 1rem;
}

/* ============================================================
   Artikel-Teaser (nur Summary!)
   10px-Raster, strukturschonend
   ============================================================ */

.obj_article_summary {
  background-color: #ffffff;
  padding: 20px;          /* 2 × 10px */
  border-radius: 6px;    /* leicht reduziert (Default-näher) */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/*Popup Notifications weiß, da sonst nicht genug Kontrast ist (vorher war grau)*/
.cmp_notification {
  background-color: #ffffff;
  border-radius: 6px;
}
/* ============================================================
   Sidebar / Custom Blocks
   Identifikatoren & Copyright
   Links nur unterstreichen
   ============================================================ */

#customblock-identifikatoren a,
#customblock-copyright a {
  text-decoration: underline;
}

/* ============================================================
   Autorenbereich – Mail-Link
   Icon als Link eindeutig kennzeichnen
   ============================================================ */

.item.authors a[href^="mailto:"] {
 
  font-size: 2rem;               /* Icon etwas größer */
  text-decoration: underline;
}


}
/* Hover & Fokus */
.item.authors a[href^="mailto:"]:hover,
.item.authors a[href^="mailto:"]:focus,
.item.authors a[href^="mailto:"]:focus-visible {
  background-color: #eef7f2;
  outline: 3px solid #f4c430;
  outline-offset: 2px;
}

/* ============================================================
   Graue Textelemente kontrastoptimiert. Systemgrauton hat zu wenig Kontrast
   ============================================================ */

.authors,
.pub_date,
.share_text,
.simpleStatistics_infotext
.modpub_caption,
.pictureCopyright{
  color: #4a5a54;
}

/* ============================================================
   Artikelinhalt – Literatur- & Quellenlinks
   ============================================================ */

.item.body a {
  text-decoration-line: underline; /* text-decoration:underline; alleine funktioniert nicht, wird von OJS überschrieben */
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  font-weight: 500;
}

.item.body a:hover,
.item.body a:focus,
.item.body a:focus-visible {
  color: #2c7a5e;
  background-color: #eef7f2;
  outline: 3px solid #f4c430;
  outline-offset: 2px;
}

/* ============================================================
   Cover-Links (Archiv + Startseite)
   Tastaturfokus sichtbar machen
   ============================================================ */

/* Link braucht eine Box */
.obj_issue_summary a,
.current_issue a {
  display: inline-block;
}

/* Fokusrahmen */
.obj_issue_summary a:focus,
.obj_issue_summary a:focus-visible,
.current_issue a:focus,
.current_issue a:focus-visible {
  box-shadow: 0 0 0 3px #f4c430;
  outline: none;
}

/* Schriftgröße von Text unter Magazinvorschaubild anpassen im Archiv */
.pictureCopyright{
  font-size: 13px;
}
/* ============================================================
   Dropdown menues für FAQ
   ============================================================ */
.pkp_structure_main details.faq-item {
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 6px;
  padding: 20px;
}

.pkp_structure_main details.faq-item summary {
  font-weight: 600;
  color: #2f6f58;
  cursor: pointer;
}


/* ============================================================
   Footer
   ============================================================ */

.pkp_structure_footer_wrapper {
  background-color: #d6eee1;
  border-top: 1px solid #dddddd;
  font-size: 0.9rem;
  color: #555555;
}

.pkp_structure_footer .pkp_footer_content #footer_left {
    margin-top: 10px;
}
.pkp_structure_footer .pkp_footer_content #footer_left .downstairs {
    bottom: -33px;
}
.pkp_structure_footer .pkp_footer_content ul {
  margin-top: 0;
}