/* Struktur - Design
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.tag-container {
	margin-bottom: 35px;
}

@media (min-width: 400px) {
	.article {
		margin-left: 8.66666666667%;
	}
}

.author {
	margin-bottom: 10px;
	padding-bottom:  10px;
}

.space {
	padding-top: 40px;
}

/* Navigation equal-width
–––––––––––––––––––––––––––––––––––––––––––––––––– */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/*
 * Tabs object.
 *
 * 1. Tables (kinda) for layout!
 * 2. This is the magic bit; make all children occupy equal width.
 * 3. Required to make the tabs fill their container.
 * 4. Make each tab pack up horizontally.
 * 5. Ensure the hit area covers the whole tab.
 */
.tabs {
    margin:  0;
    padding: 0;
    list-style: none;
    display: table; /* [1] */
    table-layout: fixed; /* [2] */
    width: 100%; /* [3] */
	background-color: #fff;
}

    .tabs__item {
        width: 100%;
        float: left;
    }

    @media screen and (min-width: 40em) {
        .tabs__item {
          display: table-cell; /* [4] */
          float: none;
          width: auto;
        }
    }

        .tabs__link {
            display: block; /* [5] */
        }


/**
 * Primary nav. Extends `.tabs`.
 *
 * 1. Stop tabs’ corners leaking out beyond our 4px round.
 */

.primary-nav {
    text-align: center;
    border-radius: 0;
    overflow: hidden; /* [1] */
    border-bottom: 1px solid rgba(125, 112, 102, 0.5);
}

        .primary-nav a {
            padding: .75em 1em;
            text-decoration: none;
            border-right: 1px solid rgba(125, 112, 102, 0.5);
			font-family: 'Lato', Helvetica, Arial, sans-serif;
			opacity: 1;
		}

        .primary-nav a:hover, .active {
            color: black;
            background: #f8d800;
            border-bottom: none;
        }

/* Responsive-nav.js */

.js .nav-collapse {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1;
}

.nav-collapse.opened {
  max-height: 9999px;
}

.disable-pointer-events {
  pointer-events: none !important;
}

.nav-toggle {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

@media screen and (min-width: 40em) {
  .js .nav-collapse {
    position: relative;
  }
  .js .nav-collapse.closed {
    max-height: none;
  }
  .nav-toggle {
    display: none;
  }
}

.nav-collapse {
  list-style: none;
  width: 100%;
  float: left;
}

.fixed {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
	z-index: 10;
}

.nav-toggle {
  position: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
  text-indent: -999px;
  position: relative;
  overflow: hidden;
  width: 70px;
  height: 55px;
  float: right;
}

.nav-toggle:before {
  color: #7d7067; /* Edit this to change the icon color */
  font-family: "responsivenav", sans-serif;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  font-size: 48px;
  text-transform: none;
  position: absolute;
  content: "≡";
  text-indent: 0;
  text-align: center;
  line-height: 55px;
  speak: none;
  width: 100%;
  top: 0;
  left: 0;
}

.nav-toggle.active::before {
  font-size: 24px;
  content:"x";
}

.logo {
	height: 20px;
}

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
	color: #222;
}

.container a {
	text-decoration: none;
	border-bottom: 1px solid #7d7067;
	margin-bottom: 2px;
}

.tag-container a {
	border-bottom: 1px solid #d9d9d9;
}

a:hover {
  color: #5f5249;
	border-bottom: 1px solid #7d7067;
}
.tag-container a:hover {
	border: 1px solid #c4c4c4;}
.tag {
	font-family: 'Lato', Helvetica, Arial, sans-serif;
	margin: 4px 2px;
	border: 1px solid #d9d9d9;
	font-size: 0.8em;
	text-decoration: none;
	display: inline-block;
	padding: 10px 15px;
	text-align: center;
}

/* Typographie
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1 {
	margin-top: 7%;
	margin-bottom: 7%;
}

.author {
	font-style: italic;
}

.align-right {
	text-align: right;
}

.fa {
	margin-left: 3px;
}

.grey {
	color: #7d7067;
}

.ubersicht {
	border-top: 1px solid #7d7067;
	padding-top: 55px;
	margin-top: 50px;
}

/* Tabelle responsive
–––––––––––––––––––––––––––––––––––––––––––––––––– */

table {
	table-layout: fixed;
}

table td {
    word-wrap: break-word;
}

@media screen and (max-width: 640px) {
	table {
		overflow-x: auto;
		display: block;
	}
}

/* Bilder
–––––––––––––––––––––––––––––––––––––––––––––––––– */
figure {
	width: 100%;
	margin: 0;
	clear: both;
}

figcaption {
	margin-bottom: 15px;
	margin-top: 0;
	font-size: 0.8em;
	bottom: 15px;
	position: relative;
	padding-bottom: 15px;
	clear: both;
	display: inline-block;
}

.img-responsive {
	width: 100%;
	margin-bottom: 25px;
}

.fl-right-50, .fl-right-30 {
	float: right;
}

.fl-left-50, .fl-left-30 {
	float: left;
}

@media (min-width: 400px) {
	.fl-left-50, .fl-right-50 {
		width: 50%;
	}
	.fl-left-30, .fl-right-30 {
		width: 30%;
	}
	.fl-left-50, .fl-left-30 {
		margin-right: 20px;
		margin-bottom: 15px;
	}
	.fl-right-50, .fl-right-30 {
		margin-left: 20px;
		margin-bottom: 15px;
	}
}

/*  Columns Plugin
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.columnsplugin {
  margin-right: -2rem;
}
.columnplugin {
  display: inline-block;
  vertical-align: top;
  padding-right: 2rem;
}
.columnsplugin-1 .columnplugin {
  width: 100%;
}
.columnsplugin-2 .columnplugin {
  width: 50%;
}
.columnsplugin-3 .columnplugin {
  width: 33.33%;
}
.columnsplugin-4 .columnplugin {
  width: 25%;
}
.columnsplugin-5 .columnplugin {
  width: 20%;
}

/*  Pagination
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.pagination a {
	border-bottom: nong;
}.

pagination {
  margin-bottom: 1.5rem;
}

.pagination-item {
  position: relative;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: #efeeed;
  color: #261e66;
  border-bottom: 0;
}

.pagination-item:hover, .pagination-item:focus {
  background: #7c6f66;
  color: white;
}

.pagination-item:active {
  background: #7c6f66;
}

.pagination-item.left {
  float: left;
}

.pagination-item.right {
  float: right;
}

.pagination-item svg {
  position: relative;
  top: 50%;
  display: block;
  margin: -6px auto 0;
  width: 24px;
  height: 12px;
}

.pagination-item path {
  fill: currentColor;
}

.pagination-item.is-inactive {
  color: #e4e3e6;
  border: 2px solid currentColor;
  background: transparent;
}

.pagination-title {
	font: 0.7em 'Lato', Helvetica, Arial, sans-serif;
	color: #7d7067;
	margin-top: 35px;
}

@media all and (min-width: 75em) {
  .pagination-item {
    position: fixed;
    top: 50%;
    margin-top: -.875rem;
  }
  .pagination-item.left {
    float: none;
    left: 2.25rem;
  }
  .pagination-item.right {
    float: none;
    right: 2.25rem;
  }
}

@media all and (pointer: coarse) {
  .pagination-item {
    /* On touch-devices we increase prev/next buttons */
    width: 2.25rem;
    height: 2.25rem;
  }
}


/* Footer
______________________________________________ */

footer {
	font-size: 0.9em;
}

.align-right {
	text-align: right;
}