@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@import url('./grid.css');

@media (prefers-reduced-motion) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* vars */
:root {
  --background-color: #f6f6f1;
  --lighter-grey-color: #ecebe6; 
  --light-grey-color: #D7D7D2; 
  --grey-color: #A0A09D;
  --dark-grey-color: #6A6A68;
  --darker-grey-color: #4F4F4D;
  --body-color: #181818;
  --red-color: #C45E62;
  --green-color: #40B288;
  --blue-color: #6F81B5;
  --yellow-color: #F89D5A;
  --base-font-size: 15px;
  --fluid-typography-ratio: 0.6;
}

@font-face {
  font-family: 'soehne';
  src: url('./font/soehne-leicht.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'soehne';
  src: url('./font/soehne-leicht-kursiv.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'soehne';
  src: url('./font/soehne-buch.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'soehne';
  src: url('./font/soehne-buch-kursiv.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
    font-family: 'soehne';
    src: url('./font/soehne-halbfett.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
  font-family: 'soehne';
  src: url('./font/soehne-dreiviertelfett.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'soehne';
  src: url('./font/soehne-dreiviertelfett-kursiv.woff2') format('woff2');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'soehne';
  src: url('./font/soehne-extraleicht.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'soehne mono';
  src: url('./font/soehne-mono-halbfett.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* RESET */
/* https://www.joshwcomeau.com/css/custom-css-reset/ */

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

h1 {
  font-weight: 500;
  font-size: 1.5em;
}

h2, h3 {
    font-weight: 500;
    font-size: 1em;
}

strong {
  font-weight: 700;
}

#root, #__next {
  isolation: isolate;
}

/* end reset */

body {
  background-color: var(--background-color);
  color: var(--body-color);
  /*font-family: "Inter", sans-serif;*/
  font-family: 'soehne', Helvetica, sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  line-height: 1.4;
  font-size: var(--base-font-size);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,
#svelte,
main {
  min-height: 100vh;
}

#svelte {
  /*padding-top: calc(13rem + var(--base-font-size));*/
}

main {
  display: flex;
  flex-direction: column;
}

body p, ul, ol {
  line-height: 1.4em;
  margin: 0 0 1.4em 0;
}

body p:last-child {
  margin: 0;
}

a.more {
  color: var(--body-color);
  text-decoration: none;
}

a.more:hover {
  color: var(--body-color);
}

a.more:after {
  font-size: 0.7em;
  padding-left: 0.15em;
  content: '\00a0\2192';
  transition: .3s;
}

a.more:hover:after {
  font-size: 0.7em;
  padding-left: 0.33em;
  content: '\00a0\2192';
}

a.out:after {
  font-size: 0.7em;
  padding-left: 0.15em;
  content: '\00a0\2197';
}

a:focus,
button:focus,
input:focus,
textarea:focus {
  outline: none;
}

.wrapper, .wide-wrapper {
  max-width: 100%;
}

.extra-top-margin {
  margin-top: 4vw
}

blockquote {
  font-size: 1.4em;
  line-height: 1.4;
  padding: 1.4em 2em;
  display: inline-block;
  position: relative;
}

blockquote .source {
  font-size: .75em;
  text-align: right;
  margin-top: .7em !important;
}

blockquote:before {
  z-index: 1;
  font-size: 3.5em;
  font-weight: 500;
  position: absolute;
  left: 0;
  top: -3vw;
  content: open-quote;
}

.pagination-holder {
  text-align: center;
  margin-bottom: 4vw;
  font-size: .75em;
}

.pagination {
  display: inline-block;
}

.paginate-page-link, .paginate-navigation, .paginate-current-page {
  color: black;
  float: left;
  padding: .25em .5em;
  text-decoration: none;
  transition: box-shadow .5s cubic-bezier(.215,.61,.355,1),color .5s cubic-bezier(.215,.61,.355,1);
  margin: 0 4px;
}

.paginate-page-link:hover, .paginate-navigation:hover, .paginate-current-page {
  box-shadow: inset 0 -2px var(--body-color);
}

.paginate-rest-indicator {
  color: black;
  float: left;
  padding: 8px 16px;
}

.videowrapper {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
    margin: 2.8em 0;
}
.videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

::selection {
  background: var(--body-color);
  color: var(--background-color);
}

@media (max-width: 47.99rem) {
  .wrapper, .wide-wrapper {
    margin-right: 4vw;
    margin-left: 4vw;
  }
}

@media (min-width: 48rem) and (max-width: 109.99rem) {
  .wrapper, .wide-wrapper {
    margin-right: 8vw;
    margin-left: 8vw;
  }
}

@media (min-width: 110rem) {
  .wrapper {
    max-width: 94rem;
    margin-right: auto;
    margin-left: auto;
  }

  .wide-wrapper {
    margin-right: 8vw;
    margin-left: 8vw;
  }

}

/*Font Sizing */
@media (min-width: 48rem) and (max-width: 79.99rem) {
  body {
    font-size: calc(var(--base-font-size) + var(--fluid-typography-ratio) * 1vw);
  }
}

@media (min-width: 80rem) {
  body {
    font-size: calc(var(--base-font-size) + var(--fluid-typography-ratio) * 17px);
  }
}


@keyframes slide-top {
  0% {
      transform: translateY(8vw);
      opacity: 0;
  }
  100% {
      transform: translateY(0);
      opacity: 1;
  }
}