/* Basis css für aktuelle webseite*/

:root {
/* ==== SCHRIFTGRÖßE ===================================================== */    
    --fs-200: 0.4rem;
    --fs-300: 0.6875rem;
    --fs-400: 0.8125rem;
    --fs-450: 1.0rem
    --fs-500: 1.25rem;
    --fs-600: 1.5rem;
    --fs-title: clamp(2rem, 5vw, 5rem);
    --fs-h1: clamp(1.55rem, 1.3vw, 1.3rem);
    --fs-xl: clamp(3rem, 7vw + 0.5rem, 6rem);
	  
    --fw-400: 500;
    --fw-700: 600;


   /* --fw-primary: "Flexo", sans-serif; */

/* ==== FARBEN ============================================================ */

    --clr-Grundfarbe: #95c11f;
    --clr-Grundfarbe-leicht: #bdd483;
    --clr-Grundfarbe-leicht-transparent: #bdd4833a;
    --clr-Blau-extra: #252853;
    --clr-Rot-extra: #b92318;
    --clr-Braun-extra: #36110d;
    --clr-Gruen-extra: #2d391b;
    --clr-nav-dunkel: #242526;
    --clr-nav-hell: #3A3B3C;
    --clr-blockcolor:  #f9fbf9;
    --clr-blockcolor-hell:  #d2d1d1;
    --clr-blockcolor-mittel:  #a09f9f;
    --clr-blockcolor-dunkel:  #696868;

    --clr-text: hsl(0, 0%, 85%);
    --clr-text-muted: hsl(0, 0%, 70%);
    --clr-text-bright: hsl(0, 0%, 97%);
    --gradient: linear-gradient(-45deg, var(--clr-primary), var(--clr-secondary));
}

/* ==== Flexo-Font ========================================================= */

/*
.Flexo-BoldIt { 
	font-family: Flexo-BoldIt;
	font-weight: normal;
	font-style: normal;
}
.Flexo-ThinIt { 
	font-family: Flexo-ThinIt;
	font-weight: normal;
	font-style: normal;
}
.Flexo-Thin { 
	font-family: Flexo-Thin;
	font-weight: normal;
	font-style: normal;
}
.Flexo-Regular { 
	font-family: Flexo-Regular;
	font-weight: normal;
	font-style: normal;
}
.Flexo-MediumIt { 
	font-family: Flexo-MediumIt;
	font-weight: normal;
	font-style: normal;
}
.Flexo-Medium { 
	font-family: Flexo-Medium;
	font-weight: normal;
	font-style: normal;
}
.Flexo-Light { 
	font-family: Flexo-Light;
	font-weight: normal;
	font-style: normal;
}
.Flexo-Heavy { 
	font-family: Flexo-Heavy;
	font-weight: normal;
	font-style: normal;
}
.Flexo-HeavyIt { 
	font-family: Flexo-HeavyIt;
	font-weight: normal;
	font-style: normal;
}
.Flexo-LightIt { 
	font-family: Flexo-LightIt;
	font-weight: normal;
	font-style: normal;
}
.Flexo-It { 
	font-family: Flexo-It;
	font-weight: normal;
	font-style: normal;
}
.Flexo-DemiIt { 
	font-family: Flexo-DemiIt;
	font-weight: normal;
	font-style: normal;
}
.Flexo-Demi { 
	font-family: Flexo-Demi;
	font-weight: normal;
	font-style: normal;
}
.Flexo-BlackIt { 
	font-family: Flexo-BlackIt;
	font-weight: normal;
	font-style: normal;
}
.Flexo-Bold { 
	font-family: Flexo-Bold;
	font-weight: normal;
	font-style: normal;
}
.Flexo-Black { 
	font-family: Flexo-Black;
	font-weight: normal;
	font-style: normal;
}
*/

.Flexo-Italic {
	font-family: FlexoItalic;
}
.Flexo-Bold {
	font-family: FlexoBold;
}
.Flexo-LightItalic {
	font-family: FlexoLightItalic;
}
.Flexo-DemiItalic {
	font-family: FlexoDemiItalic;
}
.Flexo-BoldItalic {
	font-family: FlexoBoldItalic;
}
.Flexo-MediumItalic {
	font-family: FlexoMediumItalic;
}
.Flexo-Medium {
	font-family: FlexoMedium;
}
.Flexo-Black {
	font-family: FlexoBlack;
}
.Flexo-Regular {
	font-family: FlexoRegular;
}
.Flexo-ThinItalic {
	font-family: FlexoThinItalic;
}
.Flexo-HeavyItalic {
	font-family: FlexoHeavyItalic;
}
.Flexo-BlackItalic {
	font-family: FlexoBlackItalic;
}
.Flexo-Thin {
	font-family: FlexoThin;
}
.Flexo-Demi {
	font-family: FlexoDemi;
}
.Flexo-Light {
	font-family: FlexoLight;
}
.Flexo-Heavy {
	font-family: FlexoHeavy;
}

/* ==== ALLGEMEINE SETTINGS ================================================== */

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

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

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

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

html {
  scroll-behavior: smooth;
}

/* html:focus-within {
  scroll-behavior: smooth;
}
*/
body {
  font-family: 'Flexo', sans-serif;
  font-weight: var(--fw-400);
  place-content: center;
  font-size: 1.125rem;
  min-height: 100dvh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  background: var(--clr-blockcolor);
  color: var(--clr-text);
  z-index: 1;
}

.upbutton {
  position: fixed;
  max-width: 50%;
  bottom: 30px;
  right: 30px;
  cursor: pointer;
  transform: transform 500ms;
  z-index: 1000;
}

.upbutton:hover,
.upbutton:focus-visible {
  transform: translateY(-0,75rem);
}
/* ==== ELEMENTE DIE KEINE KLASSEN HABEN ERHALTEN STANDARDSTILE ================= */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

.insta {
 max-width: 100%;

}

/* ==== ERLEICHTERT DIE ARBEIT MIT BILDERN ====================================== */
 img,
picture {
  max-width: 100%;
  display: block;
  border-radius: 0.25em;
  -webkit-box-shadow: 2px 2px 4px rgba(87, 87, 87, 0.4);
    -moz-box-shadow: 2px 2px 4px rgba(87, 87, 87, 0.4);
    box-shadow: 2px 2px 4px rgba(87, 87, 87, 0.4);
}


h1 {
  font-size: var(--fs-600);
}

h2,
h3 {
  font-weight: var(--fs-h1);
}

.text-links {
  color: #95c11f;
  text-decoration: none;
}

/* ===== Zubehör ==================== */

.flex {
  display: flex;
  gap: var(--gap, 1rem);
}

.flow >*:where(:not(:first-child)) {
  margin-top: var(--flow-spacer, 1em);
}

/* ==== ZUBEHÖR ENDE =========================================================== */

/* ==== KOPFBEREICH START ====================================================== */

.site-header {
   background-image: url(../img/gundt.jpg);
   background-color: rgb(172, 170, 170);
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   color: #95c11f;
   padding: 5rem;
   
   height: 100vh; 
   position: relative;
 }

 @media screen and (max-width: 45em) {
  .site-header {
    background-image: url(../img3/Landingpchoch.png);
   width: 100vw;
   min-height: 100svh;
  /*  height: 150%; */
  }
 }
 .titel {
   color: var(--clr-surface-muted);
   padding: 20px;
 }


.site-header-mask {
   /*   --mask-source: url('https://assets.codepen.io/308367/mountain-mask.svg');
   --mask-position: bottom;
   --mask-size: cover; */
 
   position: absolute;
   inset: 0;
   /*background: rgba(254, 254, 254, 0.5);*/
 
   -webkit-mask: url("/dist/img/floatimg-1.png"); 
   -webkit-mask-position: center bottom;
   -webkit-mask-size: 50%;
 
   mask: url("/dist/img/floatimg-1.png");
   mask: rgba(171, 236, 107, 0.5); 
   mask-position: top;
   mask-size: cover;

 }

 .site-title {
   text-align: center; 
   font-size: 5vw;
   font-weight: 600;
   line-height: 1;
   text-transform: lowercase;
   position: fixed;
   top: 200px;
   width: 100%;
 }



.bottom {
  color:var(--clr-blockcolor-hell);
  font-size: var(--fs-500);
  display: flex;
  position: absolute;
  inset: auto 0 0;
  align-items: center;
  justify-content: center;
  bottom: 0;
  padding: 0.5rem;
  background: var(--clr-blockcolor-dunkel);
}

.bottom a {
  color: var(--clr-Grundfarbe-leicht);
  text-decoration: none;
}


/* ==== KOPFBEREICH ENDE ====================================================== */

/* ==== NAVIGATION START ======================================================= */

.nav {
  position: sticky;
  top: 0px;
  background: var(--clr-nav-dunkel);
  width: 100%;
  z-index: 999;
  height: 65px;
  line-height: 65px;
  box-shadow: 5px 3px 3px gray;
} 
.wrapper {
  position: relative;
  top:0px;
  background: var(--clr-nav-dunkel);
  width: 100%;
  padding: 0 20px;
/*  margin: auto; */
  z-index: 999;
  height: 65px;
  line-height: 65px; 
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wrapper .nav-links {
  display: inline-flex;
}

.wrapper .logo a {
  color: #d9dcdc;
  text-decoration: none;
  font-size: 27px;
  font-weight: 600;
}

.nav-links li {
  list-style: none;
}

.nav-links li a {
  color: var(--clr-text);
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.nav-links li a:hover {
  color: var(--clr-Grundfarbe);
  background: var(--clr-nav-hell);
}


.nav-links .mobile-item {
  display: none;
}

.wrapper input {
  display: none;
}

.wrapper .btn {
  color: var(--clr-Grundfarbe-leicht);
  font-size: 1.8em;
  cursor: pointer;
  display: none;
}

.wrapper .btn.cancel-btn {
  position: absolute;
  right: 30px;
  top: 10px;
}


/* ==== KLEINE BILDSCHIRME ==== START ========================================== */

@media screen and (max-width: 62.25em) {
  .wrapper .btn {
    display: block;
  }
  .wrapper .nav-links {
    position: fixed;
    height: 100vh;
    width: 100%;
    max-width: 350px;
    background: var(--clr-nav-dunkel);
    display: block;
    top: 0;
    left: -100%;
    overflow-y: auto;
    line-height: 50px;
    padding: 50px 10px;
    box-shadow: 0 15px 15px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
  }
 
 #menu-btn:checked ~ .nav-links {
  left: 0%;
 }

 #menu-btn:checked ~ .btn.menu-btn {
    display: none;
 }

  .nav-links::-webkit-scrollbar {
    width: 0px;
  }

  .nav-links li {
    margin: 15px 10px;
  }

  .nav-links li a {
    padding: 0 20px;
    display: block;
    font-size: 20px;
  }

  .nav-links .drop-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    top: 65px;
    padding-left: 20px;
    width: 100%;
    max-height: 0px;
    overflow: hidden;
    transition: all 0.5s ease;
  }

  #showDrop:checked ~ .drop-menu, 
  #showMega:checked ~ .mega-box {
    max-height: 100%;

  }

  .nav-links .drop-menu li{
    margin: 0;
  }

  .nav-links .drop-menu li a{
    font-size: 18px;
    border-radius: 5px;
    padding: 3.8px 16px;
  }

  .nav-links .desktop-item {
    display: none;
  }

  .nav-links .mobile-item {
    display: block;
    font-size: 20px;
    color: #95c11f;
    font-weight: var(--fs-500);
    padding-left: 20px;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.5s ease;
  }

  .nav-links .mobile-item:hover {
    background: var(--clr-nav-hell);
    opacity: 0.4;
  }

  .mega-box {
    position: static;
    top: 65px;
    width: 100%;
    opacity: 1;
    visibility: visible;
    padding: 0 5px;
    max-height: 0px;
    overflow: hidden;
    transition: all 0.5s ease;
  }
  
  .mega-box .inhalt {
    background: #1f1f1f;
    flex-direction: column;
    padding: 20px 15px 0 15px;
  }

  .mega-box .inhalt .row {
    width: 100%;
    margin-bottom: 15px;
    border-top: 1px solid rgba(255,255,255,0.008);
  }

  .mega-box .inhalt .row:nth-child(1),
  .mega-box .inhalt .row:nth-child(2) {
    border-top: 0px;
    
  }


  .inhalt .row .mega-links {
    border-left: 0px;
    padding-left: 10px;
  }

  .row .mega-links {
    margin: 0;
  }

  .inhalt .row header {
    font-size: 19px;
  }

  .wrapper input {
    display: none;
  }
}
/* ==== NAVIGATION ENDE ======================================================= */

/* ==== SEITENINHALT START ==================================================== */

.contain {
  position: relative;
  display: grid;
  background-color: rgb(254, 254, 254);
  width: 100%;
}

section {
  margin-top: 80px;
 

}

/* ==== GRID START ============================================================ */



.grid-template {
  color: #1f1f1f;
  background-color:var(--clr-blockcolor);
  border-radius: 10px;
  display: grid;
  gap: 1.5rem;
  padding-block: 1.52rem;
  width: min(95%, 70rem);
  margin-inline: auto;
  justify-items: center;
}

@media (min-width: 37.188em) {
  .grid-col-span-2 {
    grid-column: span 2;
    }

  .grid-template {
    grid-template-columns: 2, 1fr;
  }

  .gridtemp:last-child {
    grid-row-start: 2;
  }
}


.gridtemp {
  font-size: var(--fs-450);
  padding: 2rem;
  border-radius: 0.5rem;
 /* box-shadow: 2.5rem 3rem 3rem -2rem rgba(0,0,0,0.15);*/
}

.grid-2-columns {
  display: grid;
  gap: 2em;
  margin: 0.5rem auto; 
  width: min(80%, 50rem);
  grid-auto-flow: row;
}

@media (min-width: 37.188em) {
  .grid-2-columns {
    grid-auto-flow: column;
  }
}

.grid-2a-columns {
  display: grid;
  gap: 2em;
 /* margin: 0.5rem auto; */
  width: min(80%, 50rem);
  grid-auto-flow: row;
}

.item-1 {
  grid-column: 1 / 2;
}

.item-2 {
  grid-column: 2 / 3;
}


@media (mmax-width: 37.188em) {
  .grid-2a-columns {
    grid-auto-flow: column;
  }
}

@media (max-width: 37.188em) {
  .item-1 {
    grid-area:  2;
  }
  .item-2 {
  grid-area:  1;
}
}


article {
 margin-inline: auto;
  
}

article li {
  list-style: none;
}

summary {
  justify-content: left;
 
}

.content {
  background-color: #e2e0e03a;
  padding: 0.5em;
  border-radius: 0.5em;
  text-align: block;
}

.content li {
  list-style: none;
}
/* ==== HOVER EFFEKT BILDER START =============================================== */
.post {
  width: auto;
  position: relative;
 cursor: pointer;
}

.post:hover .post-s {
  width: auto;
}

.post img {
  display: block;
  width: auto;

}

.post-s {
  width: 0px;
  height: auto;
  background: rgba(171, 236, 107, 0.5);
  border-radius: 0.5em;
  position: absolute;
  top: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.post-s h3 {
  color: white;
  padding: 10px 30px;
  text-shadow: 2px 2px 4px rgba(87, 87, 87, 0.4);
}

/* ==== HOVER EFFEKT BILDER ENDE =============================================== */

figcaption {
  color: #3A3B3C;
  font-size: 0.7rem;
}

/* ==== GRID ENDE ============================================================ */

.card {
  width: 100%;
}

.card2 {
  width: 750px;
}

.card3 {
  width: 25%;
}

img.cardtransform {
  transition: transform 0.8s;
} 

img.cardtransform:hover {
  transform: scale(1.5, 1.5);
}

.inhalt {
  font-size: 1.5vw;
  display: flex;
  flex-wrap: wrap;
  text-align: left;
  color: #1f1f1f;
  background-color: var(--clr-blockcolor); 
 /* margin-inline: auto; */
  padding: 2rem;
}

.fit {
  
  width: fit-content;
}

/* ==== GALLERY START=============================================================*/
.image-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: 50rem;
  margin-inline: auto;
}

.image-gallery > img {
  width: 100%;
  aspect-ratio: 1.5 / 1;
  object-fit: cover;

  transition: scale 350ms ease,
  opacity 350ms linear;
}



.image-gallery:has(img:hover) > img:not(:hover) {
  scale: .5;
  opacity: .7;
}
/* ==== GALLERY ENDE============================================================= */

/* ==== SLIDER START ============================================================ */
#slider {
  overflow: hidden;
}

#slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  animation: 30s slider infinite;
}

#slider figure img {
  float: left;
  width: 20%;
}

@keyframes slider {
  0% {
    left: 0;
  }
  20% {
    left: 0;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  95% {
    left: -300%;
  }
  100% {
    left: -400%;
  }
}

/* ==== SLIDER ENDE ============================================================ */
/* ==== TABELLE START =========================================================== */
 
table{
  width: 100%;
  border-radius: 0.5em;
  border-collapse: collapse;
  background: var(--clr-Grundfarbe-leicht-transparent);
 
}


td {
  padding: 1rem;
  font-size: var(--fs-500);
}

caption,
th {
  text-align: left;
}

caption {
  font-size: var(--fs-600);
  padding: .8rem;
  background: var(--clr-Braun-extra);
  color: white;
}

th {
  color: white;
  padding: 1rem;
  font-size: var(--fs-500);
  font-weight: bold;
  background: var(--clr-Gruen-extra) ;
}

tr:nth-of-type(2n) {
  background: #bdd48388;
}

.table-container {
  max-width: 100%;
  overflow-x: scroll;
}




/* ==== TABELLE ENDE ========================================================= */

/* ==== FOOTER START ========================================================= */


footer {
  width: 100%;
  text-align: center;
  min-height: 150px;
  background-color: var(--clr-nav-dunkel);
}

footer ul {
  margin: auto;

}

footer li {
  list-style: none;
}

footer a {
  color: var(--clr-text);
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

footer a:hover {
  color: var(--clr-Grundfarbe);
  background: var(--clr-nav-hell);
}


.grid-even-columns {
  padding-top: 50px;
  align-items: center;
  text-align: left;
  display: grid;
  gap: 1rem;
}


@media (min-width: 40em) {
  .grid-even-columns {
    grid-template-columns: repeat(4, 1fr);
  }
}

.grid {
  padding: 15px;
}

.linkbg {
  height: 70svh;
}

/* ==== FOOTER ENDE ========================================================= */

/* ==== Bildschirm 540px START ====================================================== */

@media (max-width: 34em) {
  th {
    display: none;
  }
 
  td {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 10ch auto;
    padding: 0.5rem 1rem;
  }

  td:first-child {
    padding-top:  2rem;
  }

  td:last-child {
    padding-bottom: 2rem;
  }

  td::before {
    content: attr(data-cell) ": ";
    color: #696868;
  }
}


/* ==== Bildschirm 540px ENDE ====================================================== */