:root {
   --gruen-hell: #82c51a;
   --gruen-dunkel: #599400;
   --maximalbreite: 1024px;
   text-decoration-skip: ink;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
}


html {
   font-family: Sofia Sans, sans-serif;
   font-weight: 300;
   font-optical-sizing: auto;
   color: black;
   background-color: white;
}

body {
   /* background-color: lightcoral; */
   hyphens: auto;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

header {
   /* display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   justify-content: space-between; */
   max-width: var(--maximalbreite);
   margin: 0px auto;
   background-color: greenyellow;
}


h1,
h2 {
   font-size: 1.5rem;
   font-weight: 400;
   text-transform: uppercase;
   margin-top: 3rem;
   margin-bottom: 1rem;
   column-span: all;
   color: var(--gruen-dunkel); 
}


h3 {
   font-size: 1.2rem;
   font-weight: 400;
   text-transform: uppercase;
   margin-top: 2rem;
   column-span: all;
   /* color: var(--gruen-dunkel); */
}

h4,
h5,
h6 {
   font-weight: 300;
   text-transform: uppercase;
   margin-top: 0px;
   column-span: all;
}


section {
   margin: 0 auto;
   max-width: calc(var(--maximalbreite) - 4rem);
}

section p {
   margin: 0;
   margin-block-start: 0px;
   column-count: inherit;
   column-gap: 2rem;
   column-rule: 1px solid darkgray;
   /* background-color: lightpink; */
}

section ul {
   margin: 0;
   padding: 0 1rem 0 1rem;
   min-width: 50%;
   margin: 0;
   /* text-indent: -1rem; */
}

section ul li {
   /* text-indent: .5rem; */
   margin-bottom: .25rem;
}

article {
   display: inline-block; 
   break-before: always;
   break-after: always;
}

img {
   margin: 0 auto;
   display: block;
   width: 100vw;
   max-width: var(--maximalbreite);
   contain: content;
}


figcaption {
   font-family: sofia sans condensed, sans-serif;
   font-size: .85rem;
   font-weight: 400;
   display: block;
   hyphens: none;
   max-width: calc(var(--maximalbreite) - 1rem);
   /* margin: 0 auto; */
   padding: .5rem 1rem 1rem 0rem;
   /* border-top: 1px solid darkgray; */
   /* background-color: lightgray; */
}

figcaption em {
   font-weight: 800;
   font-style: normal;
   text-transform: uppercase;
   color: var(--gruen-dunkel)
}

footer {

   max-width: var(--maximalbreite);
   /* align-items: first baseline;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   justify-content: stretch; */
   margin: 3rem auto 2rem auto;
}

details {
   margin: 0 0 .3rem 0;
   column-width: 20rem;
   column-gap: 2rem;
   column-rule: 1px solid darkgray;
   /* padding: 1rem; */
   background-color: transparent;
}

details[open] {
      border-bottom: 1px solid gray;
   margin-bottom: 3rem;
   padding-bottom: 1rem;
}

details summary {
   cursor: s-resize;
}

details[open] summary {
   cursor: n-resize;
}

summary::-webkit-details-marker,	
summary::marker {
  color: var(--gruen-dunkel);
  font-size: 1.em;
  font-weight: bold;
  transition: all 0.5s;  
}	

details[open] summary::-webkit-details-marker,
details[open] summary::marker {
  color: black;
}

summary {
   color: black;
   height: 2rem;
   column-span: all;
   margin: 0px;
   font-weight: 400;
}

details p {
   margin: 0;
   padding: 0 1rem 2rem 1rem;
   /* background-color: greenyellow; */
}


:any-link {
   color: var(--gruen-dunkel);
}



/* ==================================== */
/* Breakpoints 425 / 768 / 1024 */



@media (max-width: 1068px) {

   header {
      padding-left: 12px;
      padding-right: 12px;
      max-width: var(--maximalbreite - 24px);
   }


   figcaption {

      padding-left: 1rem;
   }

}



@media (max-width: 768px) {

   details {
      margin: 0 0 .3rem 1rem;
   }

   section {
      column-count: 1;
      width: 90%;
   }
}


@media (max-width: 587px) {

   section p {
      column-count: 1;
   }




}