@font-face {
  font-family: SourceSansPro;
  src: url(fonts/SourceSansPro-Regular.ttf);
}
@font-face {
  font-family: SourceSansPro;
  src: url(fonts/SourceSansPro-Bold.ttf);
  font-weight: bold;
}
@font-face {
  font-family: KMS;
  src: url(fonts/KMS.otf);
}

* {
    box-sizing:border-box;
}

/* Device dependent content width and font size */
@media (max-width: 600px) {
    html {
        font-size:2.22vw;
    }
    .content {
        width:100%;
    }
}

@media (min-width: 600px) {
    html {
        font-size:10pt;
    }
    .content {
        max-width:900px;
        min-width:600px;
    }
}

body {
    min-height:100vh;
    margin:0;
    padding:1ex .5em;
    background-color:white;
    display:flex;
    flex-direction:column;
}
@media (max-width: 600px) {
    body {
        padding:0;
    }
}
body, table, .content code { 
    font-family:SourceSansPro, arial, sans; 
    font-size:1.4rem; 
}
.footer { 
    box-shadow: 0ex 2ex 4ex black;
    height:auto;
}
#blue {
    background:
        url(backgrounds/person_kt.png),
        url(backgrounds/person_mt.png),
        url(backgrounds/person_ut.png); 
    background-size:
        20% auto,
        15% auto,
        25% auto;
    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat;
    background-position:
        0% 100%,
        22% 0%,
        100% 0%;
    flex-grow:1;
}
/* Liste von Menüpunkten für Admins */
.bottom-menu {
    color:#808080;
    font-size:90%;

    display:flex;
    justify-content: center;
    flex-wrap: wrap;
}
.bottom-menu a {
    text-align:center;
    display:block;
    min-width:6em;
    margin:.5ex 1em;
    text-decoration:none;
}
/* Liste von Geldgebern, jeweils bestehend aus oben und unten */
.footer {
    background:linear-gradient( to left, #e0e0e0e0, #c0c0c0e0); 
    color:#202020;

    display:flex;
    justify-content: center;
    flex-wrap: wrap;
}
/* Ein Geldgeber, bestehend aus oben und unten */
.footer > div {
    display:flex;
    flex-direction:column;
    justify-content: flex-end;
    padding:.5ex .25em;
}
/* Ein Geldgeber, oben oder unten */
.footer > div > div {
    width:16em;
    padding:0 0;
    font-size: 1.0rem;
    text-align: center;
    hyphens: auto;
}
/* Ein Geldgeber oben */
.footer > div > div:first-of-type {
    padding-bottom:.5ex;
}
/* Ein Geldgeber unten */
.footer > div > div:last-of-type {
    min-height: calc(15em / 782 * 285);
}
.footer img {
    height: calc(15em / 782 * 285);
}
.footer ul {
    text-align:left;
    margin-top: 0;
}
.footer li {
    margin-bottom:0ex;
    margin-top:0;
}
.footer li::before {
    content: "";
}
.footer ul img {
    height:4ex;
}


.content {
    margin:0 auto;
    padding:2ex 1em;
}
.content:not(:last-child) {
    border-bottom: 2px solid #ffd934;
}
.content img { 
    float:right; 
    clear:right; 
}
.content code {
    display:block;
    font-size:80%;
    font-weight:bold; 
}

/*
  Menü
*/
h1 {
    margin:0;
}
h1 + dfn { 
    font-style: normal;
}

#menu {
    width:100%;
    text-align:center;
    padding:0 .5em;
    position:sticky;
    top:0;
    margin:-1ex auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
#menu a {
    display:inline-block;
    position:relative;

    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 2ex 2em;
    margin: -1.5ex .5em -0.5ex -1em;

    font-weight:bold;
    text-decoration:none;
}
@media (max-width: 900px) {
    #menu a {
        font-size:1.1rem;
    }
}
@media (max-width: 750px) {
    #menu a {
        font-size:0.9rem;
    }
}
#menu a:hover, #menu a.current {
    filter:hue-rotate(290deg);
    text-decoration:none;
}
#menu a.login {
    font-weight:normal;
    font-size:75%;
}

/*
  Kleine Überschriften dichter an den Text
*/
h2, h3, h4 { margin-bottom: 0ex; }
p, ul { margin: 0ex 0em 2ex 0em; }

/*
  Fonds-Logo am rechten Rand
*/
img.head-daku, img.head-mwk, img.head-las {
    width: 15em;
}
img.head-daku, img.head-las {
    margin-bottom:2ex;
}
img.head-mwk, img.head-las {
    filter:grayscale(100%);
}

/*
  Fehlermeldungen
*/
div.msg, div.err {
    border-radius:1em;
    padding:.5ex .25em;
    background-color: #ffd93440;
}
div.msg {
    border:3px solid #ffd934;
}
div.err {
    border:3px solid #ef8cc1;
    background-image: radial-gradient(#ffd93440, #ffd93440 80%, #ef8cc1ff 100%);
}
pre {
    white-space: pre-line;
}
div.msg h2, div.err h2 {
    margin-top:0; 
    margin-bottom:0;
}
div.err h2 {
    color:#ef8cc1;
}
div.msg p, div.err p {
    margin-top:.5ex; 
    margin-bottom:.5ex;
}

/*
  Formulartabellen
*/
table.person_form, table.addr_form {
    width:100%;
}
table.person_form th, table.addr_form th {
    width:1em;
    white-space:nowrap;
    text-align:left;
}

/*
  Tourdaten-Tabelle
*/
table.dates td { 
    vertical-align:top; 
}
table.dates td:nth-child(3) { 
    padding-left:1em; 
}
table.dates div.small { 
    font-size:80%; 
}
table.dates div.meta { 
    font-size:80%; 
    color:#ef8cc1;
    margin-bottom:1ex;
}
table.dates tr.gap td { 
    height:4ex; 
}
table.dates td.cancelled {
    opacity: .5;
}

/*
  Statistik-Tabelle
*/
table.stats {
    width:100%;
}
table.stats td, table.stats th {
    padding:.25ex .5em 0 0;
    vertical-align:top;
    text-align:left;
    min-width:15%;
}
table.stats tr.gap td { 
    height:2ex; 
}
table.stats tr.gap hr { 
    width:initial;
}

/*
  Einlogg-Tabelle
*/
table.which {
    border-collapse: collapse;
    width:100%;
}
table.which td {
    /* Buttons aligned at bottom */
    vertical-align:bottom;
}
table.which tr:nth-child(1) td {
    /* Headings aligned at top */
    vertical-align:top;
}
table.which td:last-of-type {
    text-align:right;
    padding-left:1em;
}
table.which td:first-of-type {
    padding-right:1em;
}
table.which td.gap {
    border-right: 2px solid #ef8cc1;
}
table.which td:not(.gap) {
    width:50%;
}
table.which input[type=text], table.which button {
    display:inline;
    width:14rem;
    text-align:center;
}
/*
  Email-Schablonen-Tabelle
*/
table.template {
    width:100%;
}
table.template th {
    vertical-align:middle;
    text-align:right;
    padding-right:.5em;
    width:1%;
}
table.template input[type=text], table.template textarea {
    width:100%;
}
table.template textarea {
    height:40ex;
}

/*
  Email-Vorschau-Einstellungen-Tabelle
*/
table.send_email_settings {
    width:100%;
}
table.send_email_settings td:nth-child(3) {
    text-align:right;
    width:1%;
    white-space:nowrap;
}
table.send_email_settings td:nth-child(3) button {
    width:100%;
}

/*
  Email-Vorschau-Tabelle
*/
table.emails {
    width:100%;
}
table.emails th {
    text-align:left;
}
table.emails td.recipient {
    padding:.5ex 0;
    background:linear-gradient( to right, #e0e0e0e0, #c0c0c000);
}

/*
  Teilnemenden-Namen-Tabelle
*/
table.queuers {
    width:100%;
}
table.queuers input[type="text"] {
    display:inline-block;
    width:initial;
}
span.hint {
    display:inline-block;
    padding-left:1em;
    color:#ef8cc1;
}

/*
  Minimalansicht einer Person oder eines Termins
*/
td.tiny {
    padding-left:.25em;
    padding-right:.25em;
}
td.tiny > div {
    width:100%;
    border: 1px solid gray;
    padding: .25ex .25em;
    border-radius: .25ex;
}

/*
  Ticketübersicht
*/
.positions {
    margin-bottom:1ex;
}
.positions ul {
    margin:0;
}
.positions form {
    display:inline;
}

/*
  Stories und anderer Inhalt
*/
a { 
    color:#202020; 
    text-decoration-style: dashed; 
}
a:hover { 
    color:black; 
    text-decoration: underline;
}
span.right:before { 
    content:'→'; 
    color:#ef8cc1;
    padding-right:.25em;
}
span.right + span.right:before {
    padding-left:1em;
}
span.up:before { 
    content:'↑'; 
    color:#ef8cc1; 
    font-size:145%; 
}
hr { 
    border:1px solid #ffd934;
    width:66%;
    margin-left:0;
    color:white;
    
}
ul {
    list-style: none;
    padding-left:.75em;
}
ul li {
    margin-top:1ex;
}
ul li::before {
    content: "\2022";
    color: #ef8cc1;
    font-weight: bold;
    display: inline-block;
    width: .75em;
    margin-left: -.75em;
}
ol li::marker {
    font-size:125%;
    color: #ef8cc1;
    font-weight: bold;
}

span.star {
    color: #ef8cc1;
    font-weight: bold;
    position: relative;
    top: .5ex;
}

button {
    background-color: #ffd934;
    border: 1px solid black;
    border-radius: .5ex;
    padding: .5ex 2em;
}
button:hover {
    background-color: #ef8cc1
}
button:active {
}

/*
 * Links herausragende Tabelle
 */
table.hangleft {
    /* Tabelle steht links über den Rand */
    margin-left:-8em;
    /* Moderne Browser: es sei denn, es ist kein Rand da */
    margin-left:max( (min( 600px - 50vw, 0cm)), -8em);
    border-collapse: collapse; 
}
table.hangleft th { 
    width:8em; 
    text-align:right; 
    padding-right:.25em; 
}
table.hangleft th:after {
    content:':'; 
    font-weight:normal; 
}


/* Heading */
.sky {
    width:100%;
    position:relative;
    flex-shrink:0;

    background-image: url(pics/himmel.jpg);
    background-size: cover;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;

    font-size:1rem;
}
/* When width over 900px, raise the header' font size at rate .3 with regard to width */
@media (min-width: 900px) {
    .sky {
        font-size:calc( 10pt + (1.48vw - 10pt) / 3);
    }
}

.sky > div {
    position:relative;
    flex: 0 0 auto;
}

.sprite {
    position:absolute;
    opacity:0;
    transition-property:opacity;
    transition-duration:.5s;
}
.sprite.show {
    opacity:1;
}
.sprite img {
    position:relative;
    width:100%;
    height:100%;
}

@keyframes hoverx
{
    0% { left:0px; }
    25% { left:8px; }
    50% { left:5px; }
    55% { left:11px; }
    70% { left:2px; }
    100% { left:0px; }
} 

@keyframes hovery
{
    0% { top:0px; }
    25% { top:5px; }
    50% { top:2px; }
    55% { top:6px; }
    70% { top:8px; }
    100% { top:0px; }
}

@keyframes rot2
{
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(2deg); }
    55% { transform: rotate(6deg); }
    70% { transform: rotate(8deg); }
    100% { transform: rotate(0deg); }
}
@keyframes rot
{
    0% { transform: rotate(0deg); }
    25% { transform: rotate(2deg); }
    50% { transform: rotate(0deg); }
    55% { transform: rotate(-3deg); }
    70% { transform: rotate(1deg); }
    100% { transform: rotate(0deg); }
}

/*
 * div.pages contains several div.page of which only one should be
 * visible
 */
.pages .page {
    opacity:0;
    max-height:0;
    transition-property:opacity, max-height;
    transition-delay:0s, .25s;
    transition-duration:.5s, 0s;
    overflow:hidden;
}

.pages .page.show {
    opacity:1;
    max-height:2500ex;
    transition-property:opacity, max-height;
    transition-delay:.125s, .25s;
    transition-duration:.375s, 0s;
}

/*
 * Display email address when asking for confirm
 */
code.email {
    display:inline;
    font-size:130%;
    font-weight:normal;
}

/*
 * ChaCha from markdown
 */
div.dialog p {
    display:block; 
    margin:.5ex .5em .5ex 0em; 
    border-bottom:1px dotted lightgray; 
    clear:left;
    text-indent: -9.0rem;
    padding-left: 9.0rem;
}
div.dialog p > strong:first-child { 
    font-weight:bold; 
    font-size:90%; 
    padding-right: .5em;
    display:inline-block;

    min-width: 9.0rem;
    text-indent: initial;
}

div.line { 
    /* margin-left:2.0cm; */
}

/*
 * Guest recordings
 */
span.sample {
    background-image: linear-gradient(to bottom right, #e074a0, #f8cce0);
    border-radius:.5ex;
    float:right;
    clear:right;
    border:1px solid black;
    margin:0 0 1ex 1em; 
    padding:.5ex .5em;
    width: 10em;
}
span.sample button, span.sample code {
    margin:0 auto; 
    font-weight:bold;
    display:block;
    text-align: center;
}

/*
 * Story overview
 */
.sbanner {
    text-align:center;
    width:calc(100vw - 2em);
    min-height:150ex;
    /* overflow-x: scroll;  */
    margin-left:calc( (100% - 100vw) / 2 + 1em);
}
.subjects {
    float:right;
    text-align:center;
    background-image: linear-gradient(to bottom right, #e074a0, #f8cce0);
    border:2px solid black;
    border-radius:1ex;
    box-shadow:4px 4px 10px black;
    padding:0 .5em .5ex .5em;
    margin-left: 1em;
    max-width: 16em;
}
.subjects h2 { 
    margin-top:0;
}
.subjects > div {
    display: inline-block;
}
.subjects input[type=checkbox] {
    display:none;
}
.subjects input[type=checkbox] + label {
    padding: .125ex .5em;
    border-radius: .75ex;
    box-shadow: 0px 0px 0px white;
    border: 1px solid transparent;

    transition-property: background-color, box-shadow, border;
    transition-duration:.75s;
}
.subjects input[type=checkbox]:checked + label {
    background-color: #ffe396;

    box-shadow: 0px 0px 5px white;
    border: 1px solid black;
}
.sitem {
    display:inline-block;
    max-width:14em;
    padding:.5ex .5em;
    margin: -.25ex -.25em;
    border:2px solid #ef8cc1;

    background-color: #ffe396;

    background-size: 120% 150%;
    background-position: center;
    background-repeat: no-repeat;

    border-radius:1ex;
    box-shadow:4px 4px 10px black;
    text-align:center;
}
.sitem img {
    float:none; 
    width:10em; 
    width:max( 10em, 100%);
    border:1px outset black;
    box-shadow:3px 2px 5px black;
    margin-top:1ex;
}
.sitem a {
    display:block;
    margin:0 auto;
}

.sitem {
    opacity:1;
    transition-property:opacity, max-width, max-height;
    transition-delay:0s, 0s, 0s;
    transition-duration:.5s, .25s, .25s;
}
.sitem.hide {
    opacity:0;
    max-width:0;
    max-height:0;
    overflow:hidden;
}

/* Dotted Bezier curves */
.bezier {
    position:relative;
}
.bezier img {
    position:absolute;
    opacity:0;
    transition-property:opacity, transform, filter;
    transition-duration:.25s;
}
.floater {
    position:absolute;
    _opacity:0;
    transition-property:opacity;
    transition-duration:.25s;
}
.bezier img.show, .floater img.show {
    opacity:1;
}
/* flashing dots in the bezier curves */
@keyframes flashme {
  0% {
      filter: brightness(1);
      transform: scale(1);
  }
  10% {
      filter: brightness(3);
      transform: scale(2);
  }
  100% {
      filter: brightness(1);
      transform: scale(1);
  }
}

img.highlight {
  animation: flashme 250ms linear forwards;
}

/* Op-Co and 2.0-banner have drop shadows */
.banner {
    filter: drop-shadow(0.65ex 0.65ex .65ex #606060);
}


@keyframes wobble {
  0%, 100% {
      transform: scale(1);
      filter: drop-shadow(0.65ex 0.65ex .65ex #606060);
  }
  12.5% {
      transform: scale(1.1);
      filter: drop-shadow(0.665ex 0.665ex .665ex #606060);
  }
  25% {
      transform: scale(1);
      filter: drop-shadow(0.65ex 0.65ex .65ex #606060);
  }
  37.5% {
      transform: scale(1.05);
      filter: drop-shadow(0.6875ex 0.6875ex .6875ex #606060);
  }
  50% {
      transform: scale(1);
      filter: drop-shadow(0.65ex 0.65ex .65ex #606060);
  }
  62.5% {
      transform: scale(1.025);
      filter: drop-shadow(0.667ex 0.667ex .667ex #606060);
  }
  75% {
      transform: scale(1);
      filter: drop-shadow(0.65ex 0.65ex .65ex #606060);
  }
  87.5% {
      transform: scale(1.0125);
      filter: drop-shadow(0.658ex 0.658ex .658ex #606060);
  }
}

.wobble {
    animation: wobble .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform-origin:center;
}


@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  10%, 90% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.rotate {
  animation: rotate 30s ease-in-out;
}

.c-rotate {
  animation: rot 20s ease-in-out;
}