/****************************
 * GLOBALS
 ****************************/
@font-face {
  font-family: kodchasan; /* set name */
  font-size: large;
  src: url("/static/fonts/Kodchasan-Medium.ttf");
}
:root {
--font-size-menu: 1rem; /*calc(0.5rem + .75vw);*/
--cd-color: #EF9A2F;
--cd-color-bright:#F4BD76;
--header-height: 70px; /* rendered height of the sticky .navbar */
}

/****************************
 * GENERAL
 ****************************/
h1, h2, h3 {
  font-family: kodchasan;
  /* long German compounds ("Universalschlichtungsstelle") must not overflow on phones */
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 {
  margin: 2rem 0 .8rem 0;
  width:100%;
  line-height: 1.5;
  font-size: 3rem;
}
h1:after {
  display:block;
  margin: -1rem 0 .8rem -3rem;
  content:'';
  height:0;
  width:100%;
  line-height: 0;
  padding-left: 50px;
  border-top: 1rem solid var(--cd-color);
  border-bottom: 1rem solid var(--cd-color);
  border-right: 1rem solid transparent;
}
h2 {
  margin: 1.5rem 0 .8rem 0;
  border-bottom: 0.1rem solid var(--cd-color);
  width:fit-content;
  max-width: 100%;
  font-size: clamp(1.4rem, 1rem + 2vw, 2rem);
}
h3 {
  margin: 40px 0 0;
  font-size: 1rem;
  font-weight: bold;
}
a {
  color: var(--cd-color);
  transition: all ease-in-out .3s;
}
a:hover {
    color: var(--cd-color)88;
    text-shadow: 0 1px 20px var(--cd-color);
    transition: all ease-in-out .3s;
}

p {
  text-align: justify;
}
body {
  margin:0;
  padding:0;
  font-size: 17px;
  line-height: 1.5;
  position: relative;
}
/****************************
 * TEXTAREA AND TEXTDESIGN
 ****************************/
.paper {
  padding:16px;
  box-shadow: 0px 0px 25px lightgray;
  background-color: white;
  backdrop-filter: blur(5px);
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  min-height:90vh;
}

/****************************
 * NAVBAR / MENU
 ****************************/
.wheezy-menu {
  font-size: var(--font-size-menu);
  background-color: #111d;
  box-shadow: 0 0 40px #000, inset -0px -0px 10px 1px  black;
  backdrop-filter: blur(2px);
}
.wheezy-menu-img {
  height: 16vh;
  min-width:100px;
  max-width:40vw;
  min-height:70px;
  max-height: 5vh;
  object-fit: contain;

  top:10px;
  right:20px;
  position:fixed;
}
.wheezy-menu-img:hover {
  content: url("/static/assets/wheezy_textlogo_hover.svg");
}
.navbar {
  height: 15vh;
  min-height:70px;
  max-height: 5vh;

}
.footer {
  font-size: var(--font-size-menu);
  padding: 3px;
  line-height: 1;
  height:35px;
  width:100%;
}
.navbar-nav .nav-link {
    color: var(--cd-color);
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active, .navbar-nav .nav-link.show, .navbar-nav .nav-link.focus {
    color: white !important;
    text-shadow: 0 15px 20px white;
}
.navbar-toggler {
  color:var(--cd-color);
  /*font-size:calc(.5rem + 1vw);*/
  width: calc((.5rem + 1vw)*2);
  height: calc((.5rem + 1vw)*2);

  border: solid 1px var(--cd-color);
  box-shadow: 0 0 5px var(--cd-color);
  border-radius: 2px !important;
  /*padding: calc(.1rem + 1vw) !important;*/
  padding:0;
}
.navbar-toggler:focus, .navbar-toggler:active, .navbar-toggler:hover {
  color:white;
  border: solid 1px white !important;
  box-shadow: 0 0 5px white !important;
}
.button-menu {
  background-image:url("/static/assets/menu.svg");
}
.button-menu:focus, .button-menu:active, .button-menu:hover{
  background-image:url("/static/assets/menu_hover.svg");
}
.button-close {
  background-image:url("/static/assets/close.svg");
}
.button-close:focus, .button-close:active, .button-close:hover {
  background-image:url("/static/assets/close_hover.svg");
}
/****************************
 * HERO / CLAIM
 ****************************/
/* full-screen first "slide" on the home page; content follows below */
html.snap-scroll {
  scroll-snap-type: y proximity;
  scroll-padding-top: var(--header-height);
}
.snap-scroll #content {
  scroll-snap-align: start;
  scroll-margin-top: 1rem;
}
/* the page end must be a snap point too, otherwise the browser snaps back to #content */
.snap-scroll footer {
  scroll-snap-align: end;
}
.hero {
  position: relative;
  min-height: calc(100svh - var(--header-height));
  display: flex;
  flex-direction: column;
  align-items: center;
  /* claim ends at ~40vh, just above the background triangle (.triangle-container top: 45vh) */
  justify-content: flex-end;
  padding: 0 1rem 60vh;
  text-align: center;
  scroll-snap-align: start;
}
@keyframes claimWord {
  from {
    opacity: 0;
    transform: translateY(.5em) scale(.9);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@keyframes claimBar {
  to {
    width: 100%;
  }
}
.claim-hero {
  display: inline-block;
  font-family: kodchasan;
  font-size: clamp(2.5rem, 9vw, 7.5rem);
  line-height: 1.1;
  color: var(--cd-color);
  margin: 0;
}
/* words appear one after another, then a bar underlines the claim */
.claim-hero span {
  display: inline-block;
  opacity: 0;
  animation: claimWord .7s cubic-bezier(.2, .7, .2, 1) forwards;
  animation-delay: calc(.3s + var(--i, 0) * .6s);
}
/*.claim-hero::after {
  content: '';
  display: block;
  width: 0;
  height: .12em;
  margin: .15em auto 0;
  background: var(--cd-color);
  animation: claimBar .8s ease-out 2.1s forwards;
}*/
@keyframes heroScrollIn {
  to {
    opacity: 1;
  }
}
@keyframes heroScrollBounce {
  0%, 100% {
    transform: translateY(0) rotate(45deg);
  }
  50% {
    transform: translateY(.6rem) rotate(45deg);
  }
}
.hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  width: 2.5rem;
  height: 2.5rem;
  margin-left: -1.25rem;
  /* dark like the header, so it stays visible on both white and the orange triangle */
  border-right: .3rem solid #333;
  border-bottom: .3rem solid #333;
  transform: rotate(45deg);
  opacity: 0;
  animation: heroScrollIn .6s ease-out 2.8s forwards, heroScrollBounce 2s ease-in-out 3.4s infinite;
}
.hero-scroll:hover {
  border-color: white;
}

/****************************
 * NOTICE BOX
 ****************************/
.notice {
  border-left: .6rem solid var(--cd-color);
  border-radius: 0 16px 16px 0;
  background: rgba(239, 154, 47, .1);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}
.notice-title {
  font-family: kodchasan;
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 0 0 .5rem;
}
.notice p:last-child {
  margin-bottom: 0;
}

/****************************
 * TRIANGLE ELEMENT
 ****************************/
@keyframes triangleSlideIn {
  0% {
    width:400%;
    transform: translateX(-40%);
  }
  20% {
    width:200%;
    transform: translateX(0);
  }
  100% {
    width:0;
  }
}
.triangle {
  display: block;
  left:0;
  z-index: -5;
  width:0;
  margin-bottom: 200vh;
  border-top: 25vw solid transparent;
  border-bottom: 25vw solid transparent;
  
  border-left: 60vw solid var(--cd-color);
  border-right: 60vw solid var(--cd-color);
  overflow: hidden;
}
.triangle-animation {
  animation: 3s ease-out .2s 1 triangleSlideIn;
}
/* pinned to the viewport: the triangles stand still while the page scrolls over them
   (fixed elements also never extend the scroll area below the footer) */
.backdrop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}
.triangle-container {
  top:45vh;
  position:absolute;
  width:100%;
  height:50vw;
  overflow: hidden;
}
/*
.shine-box {
  text-decoration: none;
  overflow: hidden;
}

.shine-box:hover {
}
.shine-box:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    var(--cd-color)88,
    transparent
  );
  transition: all 650ms;
}

.shine-box:hover:before {
  left: 100%;
}
*/
/****************************
 * BLOG
 ****************************/
.post-teaser {
  margin: 2rem 0;
}
.post-teaser h3 {
  margin: .2rem 0 .4rem;
  font-size: 1.6rem;
  font-weight: normal;
}
.post-teaser h3 a {
  text-decoration: none;
}
.post-meta {
  margin: 0;
  font-size: .9rem;
  color: #6c757d;
}
.draft-badge {
  margin-left: .5rem;
  padding: .1rem .5rem;
  border-radius: .3rem;
  background: var(--cd-color);
  color: white;
  font-size: .75rem;
  text-transform: uppercase;
}
.post-body {
  margin-top: 2rem;
}
.post-body img {
  max-width: 100%;
  height: auto;
}

/****************************
 * CONTACT FORM
 ****************************/
/* honeypot field: off-screen instead of display:none, which some bots detect */
.contact-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/****************************
 * REDUCED MOTION
 ****************************/
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
@media (prefers-reduced-motion: reduce) {
  .claim-hero span,
  .hero-scroll {
    animation: none;
    opacity: 1;
  }
  .claim-hero::after {
    animation: none;
    width: 100%;
  }
  .triangle-animation {
    animation: none;
  }
}