body,
h1, h2, h3, h4, h5, h6,
ul,
figure,
input {
    margin: 0;
}

ul,
figure
{
    padding: 0;
}

ul {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

a {
    text-decoration: none;
    color: inherit;
}

address {
    font-style: inherit;
}

input,
textarea,
button {
    border: none;
    font: inherit;
}

svg {
    /* stroke: currentColor; */
    fill: currentColor;
}


:root {
    --lightgray: #ededed; /* not in use */
    --midgray: #909090;
    --link-unselected: #ededed;
    --green: #000000; /* behind popup transparency */
    --background-color: #ffec8b; /* hoover and image background*/
    --dimmed-background: rgba(0, 0, 0, 0.5);
    --border-color: rgba(0, 0, 0, 0.5);
    
    /* Teiltransparente Hintergrundfarbe für die Zickzack-Box ändern in zigzag.svg fill="..." */
    
    /* Phi = 1.618, sqrt(Phi) = 1.272 */
    --factor: 1.272;
    --size-m: 1rem; /* em or rem? */
    --size-l: calc(var(--size-m) * var(--factor));
    --size-xl: calc(var(--size-l) * var(--factor));
    --size-xxl: calc(var(--size-xl) * var(--factor));
    --size-s: calc(var(--size-m) / var(--factor));
    --size-xs: calc(var(--size-s) / var(--factor));

    --gap: calc(1rem / 16 * 10);
    --half-gap: calc(0.5 * var(--gap));
    --zigzag-border-width: 16px;
    --transition-duration: 0.5s;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

.site-main .logo {
    margin-top: 7.5vh;
    height: 10vh;
    margin-bottom: calc(-7.5vh - 10vh);
    text-align: center;
}

.site-main .logo img {
    height: 100%;
    max-height: 5em;
}

.viewport {
    min-height: 100vh;
    background: fixed center no-repeat;
    background-size: cover;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

#page1 {
    background-image: url(images/page1.jpg);
}

#page2 {
    background-image: url(images/page2.jpg);
}

#page3 {
    background-image: url(images/page3.jpg);
}

.permanent-box.zigzag-border {
    /* use margin as area for zig zag border */
    margin: var(--zigzag-border-width);
    border: 0 solid; /* required for Chrome and Edge - must be before border-image */
    border-image-source: url(zigzag.svg);
    border-image-slice: 16 fill;
    border-image-width: var(--zigzag-border-width);
    border-image-outset: var(--zigzag-border-width);
    border-image-repeat: round;
}

.permanent-box {
    flex-basis: 61.8%; /* 1/phi */
}

#page3 > .permanent-box {
    /* margin: var(--zigzag-border-width); technisch mindestens erforderlich */
    margin: calc(var(--zigzag-border-width) + var(--size-xxl));
}

#page3 > .permanent-box,
#page3 .patterns .permanent-box {
    flex-basis: 78.6%; /* 1/sqrt(phi) */
}

.box-title,
.box-subtitle,
.separator {
    margin: var(--gap) 0;
}

.box-title,
.box-subtitle {
    text-align: center;
}

.box-title {
    font-size: var(--size-xl);
}

.box-subtitle {
    font-size: var(--size-l);
}

.separator {
    border: none;
    border-top: 1px solid var(--border-color);
}

.list-title {
    font-weight: bold;
}

.popup {
    display: none;
}

.popup:target {
    z-index: 1;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--dimmed-background);
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup .zigzag-border {
    /* avoid background opacity with an additional box-shadow */
    /* vmax and var() and calc() does not work in MS Edge */
    /* box-shadow: 0 0 0 100vmax var(--green) inset, 0 0 calc(0.33 * var(--zigzag-border-width)) calc(0.33 * var(--zigzag-border-width)) var(--green); */
    background: var(--green);
    box-shadow: 0 0 5px 5px var(--green);    
}

.button-bar {
    display: flex;
    justify-content: center;
}

.rectangle-button {
    margin: var(--gap) auto;
    padding: var(--half-gap);
    display: inline-block;
    box-sizing: border-box;
    width: 10em;
    border-radius: var(--half-gap);
    text-align: center;
    color: #000;
}

.circle-button {
    margin: var(--gap) auto;
    border-radius: 70%;
    padding: var(--gap);
    display: block;
    width: 2.5em;
    height: 2.5em;
    background: center no-repeat;
    background-size: 80%;
}

.circle-button.knopf {
    background-image: url(images/manschettenknopf_schwarz_transparent.png);
}

.circle-button.information {
    background-image: url(images/icon_magnifier.png);
}

.circle-button.close {
    background-image: url(images/icon_x.png);
}

.circle-button.send {
    background-image: url(images/icon_brieftaube.png);
    width: 6em;
    height: 6em;
    background-size: 95%;
}

.action-style {
    border: 1px solid var(--border-color);
    background-color: var(--link-unselected);
}

.action-style:hover {
    background-color: var(--background-color);
}

.abbreviation {
    cursor: help;
}

.link:hover {
    text-decoration: underline;
    cursor: pointer;
}

.site-footer {
    padding: 1em 0;
    background: var(--midgray);

    display: flex;
    flex-flow: wrap;
    align-items: flex-end;
    justify-content: space-between;
}

.site-footer .information,
.site-footer .balzun {
    margin: var(--gap);
}

.site-footer .information {
    flex-basis: 13em;
}

.site-footer .balzun {
    display: flex;
    flex-direction: column;
    align-items: center;    
}    

.site-footer .address {
    margin-top: var(--gap);
    text-align: center
}

.site-footer .balzun {
    align-self: center;
}

.site-footer .logo img {
    height: 2em;
}

.site-footer .popup {
    align-items: flex-end;
    color: #000;  
    font-size: var(--size-s);
}