/*
Theme Name: Uni Vibe
Theme URI: https://wordpress.org/themes/twentytwenty/
Author: Lisa Richards - LeeSaaR 
Author URI: https://leesaar.de/
Description: Uni Vibe - Universal Vibe Theme
Tags: one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-width-template, theme-options, wide-blocks
Version: 1.0
Requires at least: 6.8.3
Tested up to: 6.8.3
Requires PHP: 8.2 or greater
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: univibe
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

:root 
{
    /* Geometry */
    --nav-height: 50px;
    --nav-height-desktop: 66px;

    --m0:  0;
    --m8:  8px;
    --m16: 16px;
    --m32: 32px;
    /* BUTTON */
    --btn-h: 48px;
    /* ICONS */

    /* --btn-more-shadow: 4px 8px 8px 0px rgba(0, 0, 0, 0.5); */
    --btn-more-shadow: 4px 8px 16px 0px rgba(0, 0, 0, 0.3);
    --item-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
    --item-shadow-hov: 16px 16px 16px 4px rgba(0, 0, 0, 0.2);
    --item-border-radius: 8px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body 
{
  overflow-x: hidden;
  background-color: var(--bg-body);
  line-height: 1.5;
}

#debug-txt{
  position: fixed;
  top: 100px;
  left: 0;
  color: red;
  z-index: 20;
}

h2 {
  font-size: calc(1.325rem + .9vw);
}

h3 {
  font-size: clamp(1.1rem, 0.9rem + 1.28vw, 1.3rem);
}

p, 
.wp-block-list {
  font-size: clamp(1rem, 0.9rem + 0.64vw, 1.1rem);
}



.wp-block-list {
  margin-left: var(--m16);
}
.wp-block-list ul,
.wp-block-list ol {
  margin-left: var(--m32);
}

.wp-block-list ul {
  list-style-type: disc;
}


@media (min-width: 500px) {
  p {
    font-size: clamp(1rem, 0.8592rem + 0.4507vw, 1.4rem);
  }
}

.btn-more
{
    align-self: center;
    text-decoration: none;

    width: max-content;
    padding: .6em 1em;
    border-radius: 4rem;
    background-color: var(--btn-bg) !important;;
    color: var(--btn-txt) !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    text-align: center;
    box-shadow: var(--btn-more-shadow);

    transform: scale(100%);
    transition: 
    transform .3s ease-in-out,
    background-color .3s ease-in-out,
    color .3s ease-in-out;
}

.btn-more:hover
{
    background-color: var(--btn-bg-hov) !important;;
    color: var(--btn-txt-hov) !important;;
    transform: scale(105%);
}

/*==========================================
-------- TEXT
========================================== */
.txt-upper{text-transform: uppercase;}
.txt-light-0 {color: var(--txt-light-0);}
.txt-light-1 {color: var(--txt-light-1);}
.txt-light-2 {color: var(--txt-light-2);}
.txt-dark-0 {color: var(--txt-dark-0);}
.txt-dark-1 {color: var(--txt-dark-1);}
.txt-dark-2 {color: var(--txt-dark-2);}
.txt-black{color: black;}
.txt-left{text-align: left;}
.txt-right{text-align: right;}
.txt-center{text-align: center;}

/*==========================================
-------- PAGE CONTROLS
========================================== */
#btn-scroll-auto-top
{
  position: fixed;
  background-color: transparent;
  bottom: calc(clamp(3vw, 32px, 64px )*.5);
  right: calc(clamp(3vw, 32px, 64px )*.5);
  width: clamp(3vw, 32px, 64px );
  height: clamp(3vw, 32px, 64px );
  border-radius: calc(clamp(3vw, 32px, 64px )*.5);
  font-size: calc(clamp(3vw, 32px, 64px )*.5);

  color: var(--btn-bg);
  border: calc(clamp(3vw, 32px, 64px )*.1) solid var(--btn-bg);
}

#btn-scroll-auto-top:hover
{
  /* background-color: var(--lnk-nav-hov); */
  color: var(--btn-bg-hov);
  border-color: var(--btn-bg-hov);
}

/*==========================================
-------- TOOLS
========================================== */
.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

.title-404 {
  font-size: clamp(3rem, 1rem + 12.8vw, 5rem);
  color: var(--txt-dark-2);
}

@media (min-width: 500px) /* MD */ {
  .title-404 {
    font-size: clamp(5rem, 4.2958rem + 2.2535vw, 7rem);
    color: var(--txt-dark-2);
  }
}

/*==========================================
-------- Sections
========================================== */
.box
{
  margin: 48px 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.flex-col
{
  display: flex;
  flex-direction: column;
  gap: var(--m16);
}

@media (min-width: 768px) {
  .box
  {
    margin: 48px 0;
    align-self: center;
    width: 700px;
  }
}

.in-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--m32);
}

/*==========================================
-------- Sections
========================================== */

.announcement {
  border: 2px solid rgb(30, 174, 83);
  background-color: rgb(255, 255, 255);
  padding: 16px;
  border-radius: 16px;
}


.announcement p {
  color: rgba(15, 124, 55, 0.7) !important;
}

.announcement li {
  color: rgba(15, 124, 55, 0.7) !important;
}

.announcement-title 
{
  font-weight: 700;
  font-size: calc(1.325rem + .9vw);
  color: rgb(15, 124, 55) !important;
}
/*==========================================
-------- Image List
========================================== */
:root {
  --list-image-size-small: 120px;
  --list-image-size-normal: 150px;
  --list-image-size-large: 180px;
}

.image-list {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  
}

.list-image-item{
  width: var(--list-image-size-small);
  height: var(--list-image-size-small);
  margin: 0 !important;
  overflow: hidden;
  border-radius: 8px;
  justify-self: center;
  border: 1px solid rgba(0, 0, 0, 0.374);
  box-shadow: var(--item-shadow);

  position: relative;
}

.list-image-img{
  border-radius: 8px;
  width: var(--list-image-size-small);
  height: var(--list-image-size-small);
  position: absolute;
}

.list-image-text{
  padding: 0;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: clamp(0.7rem, 0.1444rem + 3.5556vw, 0.9rem);
  width: var(--list-image-size-small);
  
  position: absolute;
  top: calc((var(--list-image-size-small)*0.5) - 16px );
  /* height: 32px; */
  padding: 8px;
  /* margin: auto 0; */
  
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 370px) {
  .image-list {
    gap: 32px;
  }

  .list-image-item{
    width: var(--list-image-size-normal);
    height: var(--list-image-size-normal);
  }

  .list-image-img{
    width: var(--list-image-size-normal);
    height: var(--list-image-size-normal);
  }

  .list-image-text{
    font-size: clamp(0.9rem, 0.6875rem + 1vw, 1rem);
    width: var(--list-image-size-normal);
    top: calc((var(--list-image-size-normal)*0.5) - 16px );
  }
}

@media (min-width: 550px) {
  .image-list {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 640px) {
  .image-list {
    gap: 32px;
  }

  .list-image-item{
    width: var(--list-image-size-large);
    height: var(--list-image-size-large);
  }

  .list-image-img{
    width: var(--list-image-size-large);
    height: var(--list-image-size-large);
  }

  .list-image-text{
    font-size: clamp(0.9rem, 0.6875rem + 1vw, 1rem);
    width: var(--list-image-size-large);
    top: calc((var(--list-image-size-large)*0.5) - 16px );
  }
}

/*
==============================================
TEST
==============================================
*/

.img-card{
  background-color: red;
  overflow: hidden;
  position: relative;
  height: 250px;
}

.test-image{
  width: 800px;
  height: auto;
  position: absolute;
  top: -200px;
  left: -100px;
  z-index: 998;

  transform-origin: 50% 50%;  /* Pivot definiert */
  transform: translate(-50px, -100px); /* bewegt das Pivot zum gewünschten Punkt */
}

.img-card-overlay{
  background-color: yellow;
  color: black;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 999;
  height: 100%;
  width: 33%;
}