/*
Theme Name: Twenty Twenty-Ortsbezogene
Theme URI: https://convive.io/
Author: Convive.io
Author URI: https://convive.io/
Description: Built on a solidly designed foundation, Twenty Twenty-Two embraces the idea that everyone deserves a truly unique website. The theme’s subtle styles are inspired by the diversity and versatility of birds: its typography is lightweight yet strong, its color palette is drawn from nature, and its layout elements sit gently on the page. The true richness of Twenty Twenty-Two lies in its opportunity for customization. The theme is built to take advantage of the Full Site Editing features introduced in WordPress 5.9, which means that colors, typography, and the layout of every single page on your site can be customized to suit your vision. It also includes dozens of block patterns, opening the door to a wide range of professionally designed layouts in just a few clicks. Whether you’re building a single-page website, a blog, a business website, or a portfolio, Twenty Twenty-Two will help you create a site that is uniquely yours.
Requires at least: 5.9
Tested up to: 5.9
Requires PHP: 5.6
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentytwoortsbezogene
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments

Twenty Twenty-Two-Ortsbezogene WordPress Theme, (C) 2021 WordPress.org
Twenty Twenty-Two-Ortsbezogene is distributed under the terms of the GNU GPL.
*/
test{
  color: red;
}
/*
 * Font smoothing.
 * This is a niche setting that will not be available via Global Styles.
 * https://github.com/WordPress/gutenberg/issues/35934
 */

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  scroll-behavior: smooth;
}

/*
 * Text and navigation link styles.
 * Necessary until the following issue is resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/27075
 */

a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25ch;
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration-style: dashed;
}

a:active {
  text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation-item a:focus {
  /* text-decoration: underline; */
  /* text-decoration-style: solid; */
  color: #fff;
  background-color: #000;
}
.wp-block-navigation .wp-block-navigation-item a:hover span,
.wp-block-navigation .wp-block-navigation-item a:focus span {
  /* text-decoration: underline; */
  /* text-decoration-style: solid; */
  color: #fff;
  background-color: #000;
}

.home .wp-block-navigation .wp-block-navigation-item:first-child a,
.wp-block-navigation .wp-block-navigation-item.active-nav-item a span {
  color: var(--wp--preset--color--greenish);
}

.home .wp-block-navigation .wp-block-navigation-item:first-child a:hover span,
.wp-block-navigation .wp-block-navigation-item.active-nav-item a:hover span,
.wp-block-navigation .wp-block-navigation-item.active-nav-item a:focus span {
  color: #fff;
  background-color: var(--wp--preset--color--greenish);
}

/*
 * Search and File Block button styles.
 * Necessary until the following issues are resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/36444
 * https://github.com/WordPress/gutenberg/issues/27760
 */

.wp-block-search__button,
.wp-block-file .wp-block-file__button {
  background-color: var(--wp--preset--color--primary);
  border-radius: 0;
  border: none;
  color: var(--wp--preset--color--background);
  font-size: var(--wp--preset--font-size--medium);
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
}

/*
 * Button hover styles.
 * Necessary until the following issue is resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/27075
 */

.wp-block-search__button:hover,
.wp-block-file .wp-block-file__button:hover,
.wp-block-button__link:hover {
  opacity: 0.9;
}
.wp-block-post-excerpt__more-link {
  display: inline-block;
  float: right;
  background-color: var(--wp--preset--color--greenish);
  padding: 0 4px;
}
/*
 * Alignment styles.
 * These rules are temporary, and should not be relied on or
 * modified too heavily by themes or plugins that build on
 * Twenty Twenty-Two. These are meant to be a precursor to
 * a global solution provided by the Block Editor.
 *
 * Relevant issues:
 * https://github.com/WordPress/gutenberg/issues/35607
 * https://github.com/WordPress/gutenberg/issues/35884
 */

.wp-site-blocks,
body > .is-root-container,
.edit-post-visual-editor__post-title-wrapper,
.wp-block-group.alignfull,
.wp-block-group.has-background,
.wp-block-cover.alignfull,
.is-root-container .wp-block[data-align='full'] > .wp-block-group,
.is-root-container .wp-block[data-align='full'] > .wp-block-cover {
  padding-left: var(--wp--custom--spacing--outer);
  padding-right: var(--wp--custom--spacing--outer);
}

.wp-site-blocks .alignfull,
.wp-site-blocks > .wp-block-group.has-background,
.wp-site-blocks > .wp-block-cover,
.wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background,
.wp-site-blocks > .wp-block-template-part > .wp-block-cover,
body > .is-root-container > .wp-block-group.has-background,
body > .is-root-container > .wp-block-cover,
body
  > .is-root-container
  > .wp-block-template-part
  > .wp-block-group.has-background,
body > .is-root-container > .wp-block-template-part > .wp-block-cover,
.is-root-container .wp-block[data-align='full'] {
  margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important;
  margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important;
  width: unset;
}

/* Blocks inside columns don't have negative margins. */
.wp-site-blocks .wp-block-columns .wp-block-column .alignfull,
.is-root-container .wp-block-columns .wp-block-column .wp-block[data-align="full"],
/* We also want to avoid stacking negative margins. */
.wp-site-blocks .alignfull:not(.wp-block-group) .alignfull,
.is-root-container .wp-block[data-align="full"] > *:not(.wp-block-group) .wp-block[data-align="full"] {
  margin-left: auto !important;
  margin-right: auto !important;
  width: inherit;
}

/*
 * Responsive menu container padding.
 * This ensures the responsive container inherits the same
 * spacing defined above. This behavior may be built into
 * the Block Editor in the future.
 */

.wp-block-navigation__responsive-container.is-menu-open {
  padding-top: var(--wp--custom--spacing--outer);
  padding-bottom: var(--wp--custom--spacing--large);
  padding-right: var(--wp--custom--spacing--outer);
  padding-left: var(--wp--custom--spacing--outer);
}

/* 
 * Post Image
 */
.wp-post-image {
  border: 10px solid #000;
  box-sizing: border-box;
}

/* 
 * Navigation menu styles.
 */
.wp-block-navigation-item.wp-block-navigation-link {
  width: 100%;
  line-height: 0px;
}

.wp-block-navigation-item.wp-block-navigation-link a {
  font-size: var(--wp--custom--typography--font-size--small);
}

/* 
 * Separator styles.
 */
.wp-block-separator {
  opacity: 1;
}

/* 
 * Angewandt Logo
 */
#alogo {
  position: fixed;
  bottom: 0px;
  left: 13px;
}

/* legacy fixes */
.lmore {
  display: none;
}
.excerpt strong {
  font-weight: 900;
  font-family: "Tstar bold";
}
.excerpt.wp-block-post-excerpt{
    font-family: var(--wp--preset--font-family--tstar);
}

/* 
 * Infos section
*/
.infos-course-date,
.infos-wrapper {
  font-size: var(--wp--custom--typography--font-size--small);
  font-family: var(--wp--preset--font-family--areal-book);
}

.infos-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.infos-bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: end;
}
.left-column {
  display: flex;
  flex-direction: column;
}
.infos {
  flex: 1;
  display: flex;
}
.infos-info strong {
  font-family: var(--wp--preset--font-family--areal-black);
}
.left-side {
  min-width:66vw;
}

/* 
 * Mobile menu styles
 */
@media (min-width: 600px) {
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open)
    .wp-block-navigation__responsive-container-close {
    display: flex;
  }
}
@media (min-width: 960px) {
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none;
  }
}

@media (min-width: 600px) {
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
    width: 100%;
    position: relative;
    z-index: auto;
    background-color: inherit;
  }
}
@media (min-width: 960px) {
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: block;
    width: 100%;
    position: relative;
    z-index: auto;
    background-color: inherit;
  }
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open)
    .wp-block-navigation__responsive-container-close {
    display: none;
  }
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
    right: 0;
  }
  /* The sticky class is added to the header with JS when it reaches its scroll position */
  .sticky #right-side-bar .menu-right {
    position: fixed;
    top: 5px;
  }
}
@media (max-width: 959px) {
  .wp-block-group.menu-right {
    width: 100vw;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 15px;
    align-items: center;
  }
  .instgram-link {
    display: none;
  }
  #right-side-bar {
    flex-basis: 0% !important;
  }
  .left-side {
    flex-basis: 100% !important;
  }
  .wp-block-navigation {
    margin-top: 0 !important;
  }
}
@media (min-width: 600px) and (max-width: 781px) {
  .left-side .wp-block-columns:not(.is-not-stacked-on-mobile)
    > .wp-block-column:not(:only-child) {
    flex-basis: 100% !important;
    flex-grow: 0;
  }
}
.infos-info a {
  font-family: var(--wp--preset--font-family--areal-book);
}
.wp-block-post-content a,
.wp-block-post-excerpt a {
  font-family: var(--wp--preset--font-family--tstar);
}
/* 
 * nicely styled links
 */
.wp-block-post-content a,
.wp-block-post-excerpt .wp-block-post-excerpt__excerpt a,
.wp-block-post-excerpt .excerpt-english a,
.infos-info a {
  background-position: center right;
  background-repeat: no-repeat;
  background-image: url(./assets/images/link.gif);
  padding-right: 11px;
  text-decoration: underline;
}
.wp-block-post-content a:hover,
.wp-block-post-excerpt .wp-block-post-excerpt__excerpt a:hover,
.wp-block-post-excerpt .excerpt-english a:hover,
.infos-info a:hover {
  background-color: #000;
  color: #fff;
}

.en-btn {
  font-family: var(--wp--preset--font-family--tstar);
  font-size: var(--wp--custom--typography--font-size--small);
}

#en {
  font-family: var(--wp--preset--font-family--tstar);
  font-size: var(--wp--custom--typography--font-size--small);
  border-top: 1px solid #000;
  padding-top: 10px;
  margin-top: 30px;
  text-decoration: underline;
}

/* 
 * Social Media styles.
 */
.instgram-link a {
  font-size: var(--wp--custom--typography--font-size--small);
  font-family: var(--wp--preset--font-family--areal-book);
}
.instgram-link a:hover {
  background-color: #000;
  color: #fff;
}

/* fontawesome styles */
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  padding-right: 5px;
}
.fa-instagram::before {
  content: '\f16d';
}

/* caption styles */
.caption {
  font-size: 0.8em;
}

/* pagination */
.wp-block-query-pagination-previous-arrow,
.wp-block-query-pagination-next-arrow {
  display: none !important;
}
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
  font-family: var(--wp--preset--font-family--areal-book);
}
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
  background-color: #000;
  color: #fff;
}

.wp-block-query-pagination-numbers a {
  font-family: var(--wp--preset--font-family--areal-book);
}
.wp-block-query-pagination-numbers a:hover {
  background-color: #000;
  color: #fff;
}

.wp-block-query-pagination-numbers .current {
  color: var(--wp--preset--color--greenish);
}
.wp-block-query-pagination-numbers .current:hover {
  background-color: var(--wp--preset--color--greenish);
  color: #fff;
}

/* images in the posts 

.wp-block-post-featured-image img.attachment-post-thumbnail {
  min-height: 100%;
  display: block;
  border: none;
  width: auto;
  height: 100%;
  margin: auto;
}

.wp-block-post-featured-image a {
  height: 675px;
  background-color: #FFF;
  display: flex;
  justify-content: right;
  position: relative;
  display: inline-block;
  overflow: hidden;
  border: 10px solid #000;
  box-sizing: border-box;
}
*/
.wp-block-post-featured-image a{
 	width:100%;
}
.animated-sticker-wrapper {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.animated-sticker {
  /* 
   * Make the initial position to be the center of the circle you want this
   * object follow.
   */
  position: absolute;
  left: 315px;
  top: 143px;
  animation: sticker 40s linear infinite; /* Chrome, Firefox 16+, 
                                                    IE 10+, Safari 5 */
  /* animation: spin 4s linear infinite; */
  max-width: 30vw;
}

/*
* Set up the keyframes to actually describe the begining and end states of 
* the animation.  The browser will interpolate all the frames between these 
* points.  Again, remember your vendor-specific prefixes for now!
*/
@-webkit-keyframes sticker {
  from {
    -webkit-transform: rotate(0deg) translateX(150px);
  }
  to {
    -webkit-transform: rotate(360deg) translateX(150px);
  }
}

@-moz-keyframes sticker {
  from {
    -moz-transform: rotate(0deg) translateX(150px);
  }
  to {
    -moz-transform: rotate(360deg) translateX(150px);
  }
}

@-o-keyframes sticker {
  from {
    -o-transform: rotate(0deg) translateX(150px);
  }
  to {
    -o-transform: rotate(360deg) translateX(150px);
  }
}

@keyframes sticker {
  from {
    transform: rotate(0deg) translateX(150px);
  }
  to {
    transform: rotate(360deg) translateX(150px);
  }
}
@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.css-typing p {
  border-right: 0.15em solid rgb(0, 0, 0);
  font-family: var(--wp--preset--font-family--areal-black);
  font-size: 170px;
  white-space: nowrap;
  overflow: hidden;
  margin: 0px;
  color: var(--wp--preset--color--greenish);
}
.css-typing p:nth-child(1) {
  width: 11.3em;
  -webkit-animation: type 4s steps(40, end);
  animation: type 4s steps(40, end);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(2) {
  width: 8.5em;
  opacity: 0;
  -webkit-animation: type2 4s steps(40, end);
  animation: type2 4s steps(40, end);
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(3) {
  width: 7.3em;
  opacity: 0;
  -webkit-animation: type3 5s steps(20, end),
    blink 0.5s step-end infinite alternate;
  animation: type3 5s steps(20, end), blink 0.5s step-end infinite alternate;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes type {
  0% {
    width: 0;
  }
  90.9% {
    border-right: 0.15em solid rgb(0, 0, 0);
  }
  100% {
    border: none;
  }
}

@-webkit-keyframes type {
  0% {
    width: 0;
  }
  99.9% {
    border-right: 0.15em solid rgb(0, 0, 0);
  }
  100% {
    border: none;
  }
}

@keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: 0.15em solid rgb(0, 0, 0);
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@-webkit-keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: 0.15em solid rgb(0, 0, 0);
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}
@-webkit-keyframes blink {
  50% {
    border-color: tranparent;
  }
}
@media (max-width: 1800px) {
  .css-typing p {
    font-size: 140px;
  }
}
@media (max-width: 1600px) {
  .css-typing p {
    font-size: 130px;
  }
}
@media (max-width: 1400px) {
  .css-typing p {
    font-size: 120px;
  }
}
@media (max-width: 1300px) {
  .css-typing p {
    font-size: 110px;
  }
}
@media (max-width: 1200px) {
  .css-typing p {
    font-size: 100px;
  }
}
@media (max-width: 1080px) {
  .css-typing {
    padding-top: 50px;
  }
  .css-typing p {
    font-size: 90px;
  }
}
@media (max-width: 790px) {
  .css-typing p {
    font-size: 70px;
  }
  .animated-sticker {
    left: 30px;
  }
  .animated-sticker-wrapper {
    max-height: 70vh;
  }
  .animated-sticker-wrapper {
    margin-left: -30px;
    padding-left: 10px;
    width: 100vw;
  }
}
@media (max-width: 600px) {
  .animated-sticker-wrapper {
    margin-left: -20px;
    padding-left: 10px;
    width: 100vw;
  }
  .css-typing {
    padding-top: 100px;
  }
  .css-typing p {
    font-size: 40px;
  }
}
html {
  scroll-behavior: smooth;
}

/* startpage colorfull */
.wp-block-post-title{
  color: var(--wp--preset--color--greenish);
}
.css-typing p {
  color: var(--wp--preset--color--greenish);
}
.paged header{
    display: none;
}