@import 'fonts.css';
@import 'variables.css';


/* general */

html {
  font-size: 16px;
  letter-spacing: 0.01em;
  font-family: 'Basier', sans-serif;
  color: var(--green-1);
  background-color: var(--offwhite-1);
  padding: 0.5rem 1.5rem 0.5rem 1.5rem;
}

[data-language="de"] {
  color: var(--green-1);
}

[data-language="en"] {
  color: var(--green-2);
}

body.disabled {
  overflow: hidden;
}

.button {
  font-size: var(--font-size-l);
  font-weight: 600;
  letter-spacing: 0.4em;
  color: var(--offwhite-1);
  background-color: var(--green-1);
  display: inline-block;
  border-radius: 2rem;
  transition: letter-spacing 0.25s;
}

@media (hover: hover) and (pointer: fine) {
  .button:hover {
    background-color: var(--blue-1);
    letter-spacing: 0.03em;
  }
}

.button a {
  display: block;
  padding: 0.3em 0.9em 0.3em 0.9em;
}

h1 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  letter-spacing: 0.2em;
  width: 100%;
  margin-bottom: 0.5rem;
  transition: letter-spacing 0.2s;
}

@media (hover: hover) and (pointer: fine) {
  h1:hover,
  h1.headline:hover {
    color: var(--blue-1);
    width: 100%;
    letter-spacing: 0.03em;
  }

  article a:hover {
    color: var(--blue-1);
  }
}



/* home */

.home {
  display: grid;
  grid-template-columns: 24rem auto;
  gap: 1.5rem;
} 

.home .content {
  width: 100%;
  flex-grow: 2;
}

.home .illustrations {
  position: fixed;
  top: 0.5rem;
  right: 0.5rem;
  width: calc(100vw - 24rem - 4rem);
  box-sizing: border-box;
  flex-grow: 1;
}

.home .illustrations svg {
  width: 100%!important;
  position: relative;
  fill: var(--yellow);
}

.home .illustrations .size {
  display: none;
}

.home section {
  border-top: 2px solid var(--green-1);
  padding: 1.5rem 0 1.5rem 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.home section:last-child {
  border-bottom: 2px solid var(--green-1);
}

.home .button {
  width: calc(100% - 6rem);
}


/* animated button */

.animated-button {
  position: relative;
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--offwhite-1);
}

.animated-button .arrow {
  position: absolute;
  top: 1rem;
  left: 6rem;
  transition: left 0.25s;
  width: 2rem;
  height: 2rem;
}

.animated-button .arrow svg {
  fill: var(--offwhite-1);
}

.animated-button h2 {
  position: absolute;
  left: 8rem;
  bottom: 2.5rem;
  transform: rotate(-15deg);
  transform-origin: 50% 100%;
  transition: transform 0.25s, left 0.25s;
  display: inline-block;
}

@media (hover: hover) and (pointer: fine) {
  .animated-button:hover .arrow {
    left: 8rem;
  }

  .animated-button:hover h2 {
    transform: rotate(5deg);
    left: 11.5rem;
  }
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: lighten;
}

@media (hover: hover) and (pointer: fine) {
  .home .animated-button:hover *,
  .home .toggle-button:hover * {
    color: var(--offwhite-1)!important;
    fill: var(--offwhite-1);
  }

  .animated-button:hover .overlay,
  .toggle-button:hover .overlay {
    background-color: var(--blue-1)!important;
  }
}


/* news */

#news .single {
  display: grid;
  grid-template-columns: 3.25rem auto;
  gap: 0.5rem;
}

#news .single:not(:last-child) {
  margin-bottom: 1.5rem;
}

#news .date {
  font-size: var(--font-size-xs);
  font-family: 'Basier Mono';
  margin-bottom: 0.25rem;
}

#news .text {
  font-size: var(--font-size-s);
}

#news .icon svg {
  width: 100%;
  fill: var(--green-1);
}

#newsletter article {
  margin-left: 3.75rem;
}

@media (hover: hover) and (pointer: fine) {
  #news .single:hover svg {
    fill: var(--blue-1);
  }

  #news .single:hover .date,
  #news .single:hover [data-language="de"] {
    color: var(--blue-1);
  }

  #news .single:hover [data-language="en"] {
    color: var(--blue-2)!important;
  }
}


/* about */

#about .toggle-button {
  position: relative;
  cursor: pointer;
  font-weight: 600;
}

#about h2 {
  position: absolute;
  left: 1rem;
  top: 3.4rem;
}

#about .toggle.hidden {
  display: none;
}

#about .arrow {
  width: 1.1em;
  margin-bottom: -0.2em;
  margin-left: 0.4em;
  transform: rotate(180deg);
  fill: var(--green-1);
}

#about .toggle-button.active .arrow {
  transform: rotate(0deg);
}

#about .toggle {
  display: flex;
  flex-direction: column;
  gap: 0.75rem
}

#about .portrait img {
  width: 100%;
}

#about .contact {
  font-family: 'Basier Mono';
  font-size: var(--font-size-xs);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

#about .overlay {
  background-color: var(--yellow);
}


/* more */

#more h2 {
  font-weight: 600;
}

#more .single {
  margin-bottom: 1rem;
}

#more .single:nth-child(3n+1) {
  margin-left: 0rem;
}

#more .single:nth-child(3n+2) {
  margin-left: 3rem;
}

#more .single:nth-child(3n+3) {
  margin-left: 6rem;
}

#more .animated-button {
  color: var(--green-1);
}

#more .animated-button .arrow svg {
  fill: var(--green-1);
}

#more .overlay {
  background-color: var(--yellow);
}


/* archive (home) */

#archive article {
  margin-left: 3.75rem;
}

#archive .note {
  margin-left: 0rem;
  display: grid;
  grid-template-columns: 3.75rem auto;
  font-family: 'Basier Mono';
  font-size: var(--font-size-xs);
}

#archive .icon {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
}

#archive .icon svg,
#login .icon svg {
  margin: auto;
  width: 2rem;
  height: 2rem;
  fill: var(--green-1)
}

#archive .overlay {
  background-color: var(--red-1);
}


/* footer */

footer  {
  font-family: 'Basier Mono';
  font-size: var(--font-size-xs);
  letter-spacing: 0.5em;
  transition: letter-spacing 0.25s;
}

footer a {
  display: block;
  padding: 0.5rem 0.5rem 0.5rem 0rem;
}
@media (hover: hover) and (pointer: fine) {
  footer:hover {
    letter-spacing: 0.02em;
  }

  footer:hover, 
  footer:hover [data-language="de"] {
    color: var(--blue-1);
  }

  footer:hover [data-language="en"] {
    color: var(--blue-2);
  }
}

.post footer {
  border-top: 2px solid var(--green-1);
  margin-top: 2rem;
}


/* login */

.login #dashboard {
  display: block;
  border: none;
  width: 100%;
}

.login #archive article {
  margin-left: 0rem;
}

input[type="hidden"] {
  display: none;
}

#dashboard .error {
  margin-top: 0.5rem;
  color: var(--red-1);
  letter-spacing: 0;
}

#dashboard .error [data-language="de"] {
  color: var(--red-1);
}

#dashboard .error [data-language="en"] {
  color: var(--red-2);
}

input:focus {
  background-color: var(--yellow);
}


/* default */

.default h2,
.default #about h2 {
  position: relative;
  top: inherit;
  left: inherit;
  font-weight: 600;
  font-size: var(--font-size-l);
}

.text p,
.text ul {
  margin-bottom: 1em;
}

.text p:last-child {
  margin-bottom: 0;
}

.text ul {
  list-style-position: outside;
  margin-left: 1em;
}

.text li {
  list-style-type: disc;
}


/* error */

.error #more {
  border-top: none;
  border-bottom: 2px solid var(--green-1);
}

.error #about .toggle-button {
  cursor: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .error .toggle-button:hover .overlay {
    background-color: var(--yellow)!important;
  }
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - */


/* archive */

.archive header,
.login header,
.default header,
.error header {
  display: flex;
  justify-content: space-between;
}

.archive header a:first-child,
.login header a:first-child,
.default header a:first-child,
.error header a:first-child {
  flex-grow: 2;
}

.archive header .buttons {
  display: flex;
  gap: 0.5rem;
}

.archive header .buttons * {
  cursor: pointer;
}

#post-content {
  padding: 0.5rem 1.5rem 0.5rem 1.5rem;
  background-color: var(--offwhite-1);
  box-sizing: border-box;
  position: fixed;
  width: 100vw;
  height: 100dvh;
  overflow-y: scroll;
  top: 0;
  left: 100vw;
  transition: left 0.7s, opacity 0.2s;
  transition-timing-function: cubic-bezier(.77, 0, .175, 1);
  z-index: 2000;
  opacity: 0;
}

#post-content.active {
  left: 0;
  opacity: 1;
}


/* dashboard */

#dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  border-top: 2px solid var(--green-1);
  border-bottom: 2px solid var(--green-1);
  padding: 0.5rem 0 0.5rem 0;
}

#dashboard .filter {
  grid-column: span 3;
}

#dashboard label {
  display: block;
  font-family: 'Basier Mono';
  font-size: var(--font-size-xs);
  margin-bottom: 0.5rem;
}

#dashboard .reset {
  font-family: 'Basier Mono';
  font-size: var(--font-size-xs);
  text-align: right;
}

@media (hover: hover) and (pointer: fine) {
  #dashboard .reset:hover span {
    color: var(--blue-1)!important;
  }

  #dashboard .reset:hover span[data-language="en"] {
    color: var(--blue-2)!important;
  }
}

.field {
  background-color: var(--offwhite-2);
  outline: 2px solid var(--green-1);
  padding: 0.4em;
  box-sizing: border-box;
  height: calc(2rem + 4px);
  display: block;

  -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

input::placeholder {
  opacity: 1;
  color: var(--green-1);
}

.tag-collection {
  display: none;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.tag-collection:has(.tag-single) {
  display: flex;
}

.tag-single {
  background-color: var(--offwhite-2);
  padding: 0.4em 0.75em 0.4em 0.75em;
  border-radius: 2em;
  font-family: 'Basier Mono';
  font-size: var(--font-size-xs);
  margin-bottom: 0!important;
}

@media (hover: hover) and (pointer: fine) {
  .tag-single:hover {
    background-color: var(--yellow);
    cursor: pointer;
  }

  .selected-single:hover .remove {
    color: var(--red-1);
  }
}

.selected-single input {
  -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   display: none;
}

.sort select {
  width: 100%;
}

.sort .inputs .icon {
  position: absolute;
  width: 2rem;
  height: 2rem;
  right: 2px;
  top: 2px;
  padding: 0.2rem;
  box-sizing: border-box;
  pointer-events: none;
}

.search .inputs .icon {
  position: absolute;
  width: 2rem;
  height: 2rem;
  right: calc(5.5rem + 2px);
  top: 2px;
  padding: 0.2rem;
  box-sizing: border-box;
  background-color: var(--offwhite-2);
  pointer-events: none;
}

.inputs:has(input:focus) .icon {
  background-color: var(--yellow);
}

select, input {
  border-radius: 0!important;
  outline-offset: -2px;
}

.sort .inputs {
  position: relative;
}

.date .inputs,
.search .inputs,
.password .inputs {
  display: grid;
  grid-template-columns: auto 5rem;
  gap: 0.5rem;
  position: relative;
}

.dates {
  display: grid;
  grid-template-columns: auto 1.5rem auto;
  gap: 0.5rem;
}

.dates .arrow {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dates .arrow svg {
  fill: var(--green-1);
  width: 100%;
}

/* General Approach */
input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
}

/* WebKit Browsers */
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

/* Firefox */
input[type="date"]::-moz-focus-inner {
  border: 0;
}

/* Internet Explorer and Edge */
input[type="date"]::-ms-clear {
  display: none;
}
input[type="date"]::-ms-expand {
  display: none;
}

/* Firefox */
input[type="date"]::-moz-focus-inner {
  border: 0;
}


button[type='submit'] {
  width: 100%;
  background-color: var(--green-1);
  border-radius: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

@media (hover: hover) and (pointer: fine) {
  button[type='submit']:hover {
    background-color: var(--blue-1);
  }
}

button[type='submit'] svg {
  height: 1.75rem;
  fill: var(--offwhite-1);
  transition: margin-left 0.3s;
}
@media (hover: hover) and (pointer: fine) {
  button[type='submit']:hover svg {
    margin-left: 1.75rem;
  }
}

button.top {
  width: 2rem;
  height: 2rem;
  border-radius: 2rem;
  background-color: var(--green-1);
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (hover: hover) and (pointer: fine) {
  button.top:hover {
    background-color: var(--blue-1);
  }
}

button.top svg {
  fill: var(--offwhite-1);
  width: 1.5rem;
  margin-top: -0.3em;
}

.house {
  width: 2rem;
  height: 2rem;
  border-radius: 2rem;
  background-color: var(--green-1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.house svg {
  fill: var(--offwhite-1);
  width: 1.75rem;
}

@media (hover: hover) and (pointer: fine) {
  .house:hover {
    background-color: var(--blue-1);
  }
  .house:hover svg {
    fill: var(--offwhite-1);
  }
}


/* posts */

#posts {
  padding-top: 0.5rem;
  padding-bottom: 1rem;
  display: flex;

  flex-direction: column;
  border-bottom: 2px solid var(--green-1);
}

.post-count {
  font-family: 'Basier Mono';
  font-size: var(--font-size-xs);
  margin-bottom: 0.5rem;
}

.post-collection {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.post-single {
  width: 11rem;
  height: 11rem;
  background-color: var(--offwhite-1);
  outline: 2px solid var(--offwhite-2);
  outline-offset: -2px;
  position: relative;
  border-radius: 0.5rem;
  transition: border 0.1s;
  overflow: hidden;
}

.post-single img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (hover: hover) and (pointer: fine) {
  .post-single:hover {
    cursor: pointer;
    outline: 2px solid var(--blue-1);
  }
}

.post-single .icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  visibility: hidden;
}

.post-single .icon svg {
  width: 3.5rem;
  height: 3.5rem;
}

@media (hover: hover) and (pointer: fine) {
  .post-single:hover .icon {
    visibility: visible;
  }
}

.month-separator {
  font-family: 'Basier Mono';
  font-size: var(--font-size-xs);
  grid-column: span 2;
  width: 100%;
  padding-top: 0.5rem;
}

.slide-count {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  height: 1.25rem;
  width: 1rem;
  background-color: white;
  padding: 0.4em;
  font-size: var(--font-size-xs);
  text-align: center;
  border-radius: 2em;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}

/* archive about */

.archive-about {
  position: fixed;
  top: 0;
  left: 100vw;
  width: 100%;
  background-color: var(--offwhite-1);
  min-height: 100dvh;
  z-index: 2000;
  display: grid;
  grid-template-columns: 24rem auto;
  gap: 1.5rem;
  padding-left: 1.5rem;
  height: 100dvh;
  overflow-y: scroll;
  transition: left 0.7s, opacity 0.2s;
  opacity: 0;
}

.archive-about.active {
  left: 0;
  opacity: 1;
}

.archive-about header {
  align-items: center;
  height: 3.2rem;
  box-sizing: border-box;
}

.archive-about nav {
  width: 100%;
}

.archive-about ul {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}

.archive-about section {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--green-1);
  padding: 1.5rem 0px;
  gap: 0.75rem;
}

.archive-about #about h2 {
  font-size: var(--font-size-l);
  font-weight: 600;
  position: relative;
  top: 0;
  left: 0;
}

.archive-about #about .toggle-button {
  cursor: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .archive-about .toggle-button:hover .overlay {
    background-color: var(--yellow)!important;
  }
}

.archive #about svg {
  fill: var(--yellow)!important;
  pointer-events: none;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* post */

.post main {
  min-height: calc(100vh - 8rem);
}
.post-content {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.post h2 {
  font-family: 'Basier Mono';
  font-size: var(--font-size-xs);
  margin-bottom: 0.5rem;
}

.post h3 {
  font-size: var(--font-size-l);
  font-weight: 600;
  margin-bottom: 1rem;
}

.post .info {
  max-width: 24rem;
}

.post .text {
  margin-bottom: 1.5rem;
}

/* slideshow */

.slideshow-collection {
  margin-bottom: 1rem;
  max-width: 80vh;
}

.slideshow {
  width: 100%;
  aspect-ratio: 1/1;
  position: relative;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.slideshow::-webkit-scrollbar {
  display: none;
}

.slide {
  position: relative;
  scroll-snap-align: start;
  flex-shrink: 0;
  display: flex;
  box-sizing: border-box;
  aspect-ratio: 1/1;
  width: 100%;
  overflow: hidden;
  display: inline-block;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.slide::-webkit-scrollbar {
  display: none;
}

.slideshow-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Basier Mono';
  font-size: var(--font-size-xs);
  margin-top: 0.2rem;
  gap: 0.5rem;
}

.slideshow-navigation svg {
  fill: var(--green-1);
  height: 1.5rem;
}

.next-slide,
.prev-slide {
  transition: opacity 0.2s;
  width: 100%;
  height: 1.5rem;
  display: flex;
}

.next-slide {
  justify-content: flex-end;
}

@media (hover: hover) and (pointer: fine) {
  .slideshow-navigation button:hover {
    background-color: var(--offwhite-2);
  }

  .slideshow-navigation button:hover svg {
    fill: var(--blue-1);
  }
}

.slideshow-navigation.first .prev-slide,
.slideshow-navigation.last .next-slide {
  opacity: 0;
  pointer-events: none;
}

/* image slide */

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* video slide */

.slide video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  cursor: pointer;
}

.block-type-video .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  pointer-events: none;
  position: absolute;
}

.block-type-video .icon.hidden {
  visibility: hidden;
}

.block-type-video svg {
  width: 3rem;
  height: 3rem;
}

/* text slides */

.block-type-text {
  font-family: 'Basier Mono';
  color: var(--black);
  overflow-y: scroll;
  padding: 2rem;
  box-sizing: border-box;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.block-type-text .date {
  font-size: var(--font-size-xs);
  margin-bottom: 1rem;
}

.block-type-text .diary {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
}

.background-1 {
  background-image: url('../images/textures/fff_textbeitrag_hintergrund_1.jpg');
}

.background-2 {
  background-image: url('../images/textures/fff_textbeitrag_hintergrund_2.jpg');
}

.background-3 {
  background-image: url('../images/textures/fff_textbeitrag_hintergrund_3.jpg');
}

.background-4 {
  background-image: url('../images/textures/fff_textbeitrag_hintergrund_4.jpg');
}

.background-5 {
  background-image: url('../images/textures/fff_textbeitrag_hintergrund_5.jpg');
}

.block-type-text p {
  margin-bottom: 1em;
}

/* navigation */

.post header {
  border-bottom: 2px solid var(--green-1);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  font-size: var(--font-size-xs);
  font-family: 'Basier Mono';
  height: 2.7rem;
  box-sizing: border-box;
  align-items: center;
}

nav ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  width: calc(100vw - 4rem);
}

nav a,
nav button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  border-radius: 2rem;
  padding: 0.2rem;
}

@media (hover: hover) and (pointer: fine) {
  nav a:hover,
  nav button:hover {
    background-color: var(--offwhite-2);
    color: var(--blue-1);
  }

  nav a:hover svg,
  nav button:hover svg {
    fill: var(--blue-1);
  }

  .close button:hover {
    background-color: var(--blue-1);
  }

  .close button:hover svg {
    fill: white;
  }
}

nav .icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

nav svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--green-1);
}

nav .navigation button {
  justify-self: flex-start;
  width: 100%;
}

nav .close {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

nav .home {
  position: fixed;
}


/* lazy load */

.lazy {
  opacity: 0;
}

.loaded {
  opacity: 1;
  transition: opacity 0.5s;
}