/*********/
.column-grid {
  display: grid;
  grid-column-gap: calc(100%/24*0.5);
  grid-row-gap: 1em;
  grid-template-columns: 1fr;
}
.entry {
  color: var(--dgrey);
  transition: all 0.125s ease;
  overflow: hidden;
  border-radius: 1em;
  border-bottom: 1px solid lightgray;
}
.entry .content {
  position: relative;
  padding: 0.5em 1em;
}
.entry .content h2 {
  font-size: 1.5em;
  margin-top: 1rem;
}
.entry .label {
  padding: 0.25em 0.5em;
  border-radius: 0.5em;
  font-size: 1rem;
}
.entry .label.dialfire {
  background-color: var(--red);
  color: var(--w);
}
.entry .label.callcenter {
  background-color: var(--amber);
  color: var(--dgrey);
}
.entry .label.customer {
  background-color: var(--teeal);
  color: var(--w);
}
.entry .label.guest {
  background-color: var(--b);
  color: var(--w);
}
.entry.entryPicture,
.entry.entryBig {
  display: flex;
  flex-flow: column wrap;
}
.entry.entryPicture .content,
.entry.entryBig .content {
  flex: 1 0 auto;
}
.entry.entryPicture div:first-child,
.entry.entryBig div:first-child {
  position: relative;
  overflow: hidden;
}
.entry.entryPicture div:first-child svg,
.entry.entryBig div:first-child svg {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100.1%;
  z-index: 3;
}
.entry.entryPicture div:first-child img,
.entry.entryBig div:first-child img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  transition: transform 0.25s ease;
}
.entry.entryPicture div:first-child,
.entry.entryBig div:first-child {
  position: relative;
  /*.label {
				position: absolute;
				right: 1em;
				bottom: 0;
				z-index: 5;
			}*/
}
.entry .label {
  position: relative;
  width: fit-content;
}
.entry:hover {
  color: var(--red);
}
.entry:hover h2 {
  color: var(--red);
}
.entry:hover img {
  transform: scale(1.05);
}
@media only screen and (min-width: 768px) {
  .column-grid {
    grid-row-gap: 2em;
    grid-template-columns: 1fr 1fr;
  }
  .entry.entry-1 {
    grid-column: span 2;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
  }
  .entry.entry-1 .content {
    flex: 0 1 auto;
  }
  .entry.entry-1 div:first-child {
    flex: 0 0 50%;
    height: 100%;
    overflow: hidden;
  }
  .entry.entry-1 div:first-child img {
    width: 100%;
    height: auto;
    min-height: 100%;
    max-width: none;
    object-fit: cover;
  }
  .entry.entryBig {
    grid-column: span 2;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
  }
  .entry.entryBig + .entryBig {
    flex-direction: row-reverse;
  }
  .entry.entryBig .content {
    flex: 0 1 auto;
    padding: 2em 1em;
  }
  .entry.entryBig div:first-child {
    flex: 0 0 50%;
    height: 100%;
    overflow: hidden;
  }
  .entry.entryBig div:first-child img {
    width: 100%;
    height: auto;
    min-height: 100%;
    max-width: none;
    object-fit: cover;
  }
  .entry.entryBig svg {
    display: none;
  }
}
@media only screen and (min-width: 1600px) {
  .column-grid {
    grid-row-gap: 2em;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }
  .entry {
    grid-column: span 2;
  }
  .entry.entry-1 {
    grid-column: span 3;
  }
  .entry.entryBig {
    grid-column: span 6;
  }
}
@media only screen and (min-width: 1920px) {
  .entry {
    grid-column: span 2;
  }
  .entry.entry-1 {
    grid-column: span 4;
  }
  .entry.entryBig {
    grid-column: span 3;
  }
  .entry.entryBig + .entryBig {
    flex-direction: row;
  }
}
/********/
.column-12 figure {
  text-align: center;
}
.column-12 img {
  max-width: 100%;
  height: auto;
  border-radius: 2em;
}
.column-12 figcaption {
  font-size: 1rem;
  color: hsl(0, 0%, 46%);
}
.column-12 h1,
.column-12 h2,
.column-12 h3 {
  scroll-margin-top: 140px;
}
.column-12 p {
  margin: 0.75rem 0;
  text-align: justify;
}
.column-12 p.quote {
  font-weight: 600;
  font-size: 1.1rem;
}
.column-12 ul {
  margin: initial;
  padding: 0 0 0 1.75em;
}
.column-12 ul li {
  list-style: initial;
}
.column-12 ul li:not(:first-child) {
  margin: 0.35em 0;
}
.column-12 small {
  display: block;
  position: relative;
  text-align: right;
}
.column-12 small svg {
  position: absolute;
  width: 64px;
  height: 64px;
  top: -16px;
  z-index: -1;
  right: -8px;
}
.column-12 .textIndent {
  padding-left: 0.6em;
}
.column-12 .code {
  padding: 0.5em 0.75em;
  font-family: 'Roboto Mono', "Courier New", Courier, monospace;
  background-color: hsl(200, 1%, 97%);
  border-radius: 1em;
  white-space: nowrap;
  overflow-x: auto;
}
.column-12 .code .textIndent {
  padding-left: 0;
}
.column-12 code {
  font-family: 'Roboto Mono', "Courier New", Courier, monospace;
  background-color: hsl(200, 1%, 97%);
  border-radius: 4px;
  white-space: nowrap;
  text-align: left;
  word-break: break-word;
}
.column-12 .hint {
  background-color: #ffc6c6;
  border: 1px solid #fdb1b1;
  color: #5c2424;
  padding: 0.5rem;
}
.column-7 {
  position: fixed;
  top: 80px;
  margin: 0;
  z-index: 3;
  overflow-x: hidden;
}
.column-7 .docu-nav {
  display: flex;
  justify-content: space-between;
  padding: 1em 0.5em;
  width: 100%;
  gap: 0.5em;
  background-color: #f5f5f5;
}
.column-7 .docu-nav i {
  flex: 0 0 auto;
}
.column-7 .docu-nav span {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.column-7 .directory {
  display: none;
}
.column-7.open {
  bottom: 0;
  overflow-y: auto;
  margin: 0;
  background-color: white;
}
.column-7.open .directory {
  display: block;
  padding: 0 1em;
}
@media only screen and (min-width: 400px) {
  .column-7 {
    top: 90px;
  }
  .column-7 .docu-nav {
    padding: 1em;
  }
}
@media only screen and (min-width: 600px) {
  .column-7 {
    top: 90px;
  }
}
@media only screen and (min-width: 768px) {
  .column-12 {
    margin-top: -4em;
  }
  .column-7 {
    position: sticky;
    top: 120px;
    margin: 0;
    margin-left: calc(100% / 24);
    max-height: calc(100vh - 200px);
    align-self: flex-start;
    overflow-y: auto;
  }
  .column-7 .docu-nav {
    display: none;
  }
  .column-7 .directory {
    display: block;
  }
}
@media only screen and (min-width: 1400px) {
  .column-7 {
    top: 140px;
  }
  .column-12 {
    /*p, small, ul, .info, .note {
			width: calc(100%*10/12);
		}*/
  }
  .column-12 p.quote {
    text-align: left;
    font-size: 2rem;
  }
  .column-12 small svg {
    width: 128px;
    height: 128px;
    top: -32px;
    right: -48px;
  }
}
@media only screen and (min-width: 1600px) {
  .column-7 {
    top: 160px;
  }
}
@media only screen and (min-width: 1920px) {
  .column-7 {
    top: 200px;
  }
}
/****/
.directory {
  padding: 0;
  margin: 1em 0;
}
.directory li {
  margin: 0.35em 0;
}
.directory li li {
  margin-left: 1em;
  font-size: 0.9em;
}
.directory li a {
  padding: 0.25em 1em;
  display: block;
  color: var(--dgrey);
  border-radius: 1em;
}
.directory li a:hover {
  color: var(--teeal);
}
.directory li a.active {
  color: var(--dgrey);
  background-color: var(--lteeal);
}
.docDirectory .directory li a {
  padding: 0.25em 1em;
}
.docDirectory .directory ul li {
  margin-left: 1em;
}
.docDirectory .directory ul li a {
  padding: 0.125em 1em;
  font-size: 0.9em;
}
.docDirectory .directory ul ul li {
  margin-left: 2em;
}
.docDirectory .directory ul ul li a {
  padding: 0.05em 1em;
  font-size: 0.8em;
}
@media only screen and (min-width: 768px) {
  .directory li a {
    padding: 0.5em 1em;
  }
}
/***
Doku
***/
.doc span {
  font-style: normal;
}
.doc span.button {
  padding: 0 5px;
  border-radius: 4px;
  border: 1px solid var(--teeal);
  white-space: nowrap;
}
.doc span.tab {
  padding: 2px 4px 2px 3px;
  border-left: 3px solid var(--teeal);
  background: var(--lteeal);
  white-space: nowrap;
}
.doc span.literal {
  padding: 2px 4px;
  background: var(--lteeal);
  white-space: nowrap;
  border-radius: 4px;
}
.doc span.note {
  color: var(--teeal);
}
.doc div.note {
  color: var(--b);
}
.doc div.info {
  border-radius: 5px;
  padding: 12px 16px;
  background: var(--lteeal);
}
.doc em {
  font-style: normal;
  padding: 0px 4px 0 4px;
  background: var(--lteeal);
  border-radius: 4px;
  white-space: nowrap;
}
.doc strong em {
  font-style: italic;
  padding: 0;
  background: transparent;
}
.doc code {
  font-family: 'Roboto Mono', "Courier New", Courier, monospace;
  padding: 2px 4px;
  font-size: 90%;
  background-color: hsl(0, 0%, 94%);
  border-radius: 4px;
  white-space: nowrap;
}
.doc a,
.doc a:visited {
  color: var(--teeal);
  text-decoration: underline dotted;
  transition: all 0.2s ease;
}
#sectionHead6 .doc a,
#sectionHead6 .doc a:visited {
  color: var(--w);
}
.doc a:hover,
.doc a:active,
.doc a:focus {
  color: var(--dgrey);
  background-color: var(--lteeal);
}
#sectionHead6 .doc a:hover,
#sectionHead6 .doc a:active,
#sectionHead6 .doc a:focus {
  color: var(--dgrey);
}