/* ------------------------------------------------------------- 15/03/2024 - *
   Global Classes (Copy & Paste)
 * -------------------------------------------------------------------------- */


/* ------------------------------------------------------------- 04/10/2022 - *
   debugging: html.-showgrid / -testr / <dfn class="-text-smaller">
 * -------------------------------------------------------------------------- */
html.-showgrid {
  #wrapperGroups,
  .secHead,
  .secPage,
  .secFoot {
         border: 1px dotted DeepPink;
   > * { border: 1px dotted DeepPink; }
  }
} /* .-showgrid */

.-testr,
.-testr > * { border: DeepPink 1px dashed; }
dfn { 
  font-style: normal;
  display: block;
  border-bottom: rgba(var(--text-rgb),.5) 1px dashed;
  padding: .5em 0;
  margin-bottom: 1em;

  label {
    float: right;
    display: table;

    a:not(:last-child):after { content: ' · '; }
  } /* label */
} /* dfn */



/* ------------------------------------------------------------- 04/10/2022 - *
   hr
 * -------------------------------------------------------------------------- */
hr {
  clear: both; 
  display: block; 
  margin: 1px auto; 
  border: none;
  border-top: 1px solid var(--text-hex);  
  opacity: .2; /* wie b-interliner */
} /* hr */



/* ------------------------------------------------------------- 10/08/2023 - *
   iframe / img / video / picture
 * -------------------------------------------------------------------------- */
img {
  display: block; /* kein Part des new Reset, aber wir brauchen es */
  max-width: 100%;

  /* new reset by gist.github.com/johnfmorton/755903eda86d4621bb55c61691b08e4f_w */
//height: auto; /* in unserem Fall nicht verwenden */
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 0.75rem; /* noch keinen Effekt erkannt */
} /* img */

picture {
  display: block;  
  img { width: 100%; }
} /* picture */ 

iframe, video {
      width: 100%;
  max-width: 100%;
  display: block;
  object-fit: cover;
  
  &:focus { outline: none; }
} /* img, video */



/* ------------------------------------------------------------- 13/03/2024 - *
   Helper Classes
 * -------------------------------------------------------------------------- */
.-clearfix:before,
.-clearfix:after { content: ''; display: table; }
.-clearfix:after { clear: both; } 
.-text-small,   small   { font-size: small;    font-size: clamp(12px, 0.65rem + .10vw, 14px); }
.-text-smaller, smaller { font-size: smaller;  font-size: clamp(13px, 0.80rem + .10vw, 16px); } /* vor 04/03/2024 => 0.75rem */
.-text-large            { font-size: larger;   font-size: clamp(16px, 1.15rem + .10vw, 22px); }
.-text-xlarge           { font-size: x-large;  font-size: clamp(22px, 1.50rem + .10vw, 36px); }
.-text-bold             { font-weight: bold; }
.-text-justify          { text-align: justify; }
.-text-center           { text-align: center; }
.-text-left             { text-align: left; }
.-text-right            { text-align: right; }
.-text-italic           { font-style: italic; }
.-text-striked          { text-decoration: line-through; }
.-text-capitalize       { text-transform: capitalize; }
.-text-lowercase        { text-transform: lowercase; }
.-text-uppercase        { text-transform: uppercase; }
.-text-hyphens          { hyphens: auto; }
.-text-monospace        { font-family: monospace; }
.-inline-block          { display: inline-block; }
.-hide                  { display: none; }
.-nowrap                { white-space: nowrap; }
.-float-left            { float: left; }
.-float-right           { float: right; }
.-flip-x                { transform: scaleX(-1); }
.-flip-y                { transform: scaleY(-1); }
.-marginright           { margin-left: auto; margin-right: 0; }
.-marginauto            { margin-left: auto; margin-right: auto; }
.-maxwidth0600          { max-width:  600px; }
.-maxwidth0800          { max-width:  800px; }
.-maxwidth1200          { max-width: 1200px; }
.-maxwidth1600          { max-width: 1600px; }
.-maxwidth1900          { max-width: 1900px; }
.-maxwidth2200          { max-width: 2200px; }
.-maxwidth2500          { max-width: 2500px; }
.-maxwidth32ch          { max-width: 32ch; }
.-maxwidth44ch          { max-width: 44ch; }
.-maxwidth54ch          { max-width: 54ch; }
.-maxwidth72ch          { max-width: 72ch; }
.-maxwidth90ch          { max-width: 90ch; }
.-grayscale             { filter: grayscale(100%); }
.-invert                { filter: invert(100%); }
.-circled               { border-radius: 1000px; }
.-nostyle {
  padding-left: 0;
  list-style: none;
  color: inherit!important;
  border: none!important;
}



/* ------------------------------------------------------------- 04/10/2022 - *
   .-shd-curved
 * -------------------------------------------------------------------------- */
.-shd-curved {
  position: relative;
  background-color: var(--back-hex);

  &:before,
  &:after { 
    z-index: -1;
    content: '';
    position: absolute;
    bottom: 14px;
    width: calc(50% - 2%);
    height: 16px;
    box-shadow: 0 15px 10px rgba(Black, 0.3);    
  }

  &:before { left:  2%; -webkit-transform: rotate(-1deg); transform:rotate(-1deg); }
  &:after  { right: 2%; -webkit-transform: rotate( 1deg); transform:rotate( 1deg); }  
} /* .-shd-curved */



/* ------------------------------------------------------------- 11/01/2024 - *
   .b-accordion (wird zumindest in -incl-dsgvo.php verwendet)
 * -------------------------------------------------------------------------- */
div[class*="b-accordion"] {
  > h2, > h3, > h4 {    
    position: relative;
    cursor: pointer;
    line-height: 1.25;
    margin-bottom: 1em;
    padding-left: 1em;
    
    /* icon */
    &:before {
      position: absolute; top: 50%; transform: translateY(-50%); /* vertical center */
      left: 0;
      content: '+';
      transition: .5s;
    } /* :after */

    &.-is-active * { color: var(--warn-hex); }
    &.-is-active:before { content: '–'; } 
  } /* hx */
    
  &.-bordered {
    > h2, > h3, > h4 {    
      border-bottom: 1px solid rgba(var(--text-rgb),.1);
      padding-bottom: .25em;      
    } /* hx */
  } /* .-bordered */
} /* b-accordion */



/* ------------------------------------------------------------- 01/04/2024 - *
   ul.tabs22 (Simple Tabs)
 * -------------------------------------------------------------------------- */
ul.tabs22-default {
  display: flex;
  grid-gap: .5em 1em;
  flex-wrap: wrap; /* unter flex-basis brechen Kindelemente um */
  list-style: none;
  padding: 0;

//> * { border: 1px dotted; }

  li {
    a {
      text-decoration: none;
      border-bottom: 2px solid;
      cursor: pointer;
      
      &:hover, 
      &.-is-active { border-bottom: 2px solid var(--warn-hex); }
      &.-is-active { cursor: default; }
    } /* a */

    &.-align-right { margin-left: auto; } /* Einzelnes li rechts */
  } /* li */

  &.-align-right   { justify-content: flex-end; } /* Alle rechts */
  &.-align-center  { justify-content: center; } /* Alle center */
  &.-align-around  { justify-content: space-around; }
  &.-align-between { justify-content: space-between; }
  &.-valign-center { align-items: center; } /* vertikal centers */
  &.-valign-bottom { align-items: flex-end; } /* vertikal bottom */
} /* ul.tabs22-default */

//.tabgroup.tabs22-demo > div { border: 1px dotted; }



/* ------------------------------------------------------------- 12/04/2024 - *
  .b-flexgroup-flex
  <div class="b-flexgroup-flex50p | -align-center | -valign-bottom | -testr">
    <div>1</div>
    <div>1</div>
  </div><!-- b-flexgroup -->
 * -------------------------------------------------------------------------- */
[class*="b-flexgroup-flex"] { 
//border: 1px dashed;
  display: flex;
  grid-gap: .5em;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  
  &:not[class*="-marginauto"] { margin: 0; }
  
  /* horizontale Ausrichtung der items im Container */
  &.-align-left    { justify-content: flex-start; }
  &.-align-center  { justify-content: center; }
  &.-align-right   { justify-content: flex-end; }
  &.-align-around  { justify-content: space-around; }
  &.-align-between { justify-content: space-between; }
 
  /* vertikale Ausrichtung der items im Container */  
  &.-valign-top      { align-items: flex-start; }
  &.-valign-center   { align-items: center; }
  &.-valign-bottom   { align-items: flex-end; }  
	
  &[class*="-flex25p"] > * { flex-basis: calc(25% - .5em); flex-grow: 1; }
	&[class*="-flex33p"] > * { flex-basis: calc(33% - .5em); flex-grow: 1; }
	&[class*="-flex50p"] > * { flex-basis: calc(50% - .5em); flex-grow: 1; }	
} /* enthält */



/* ------------------------------------------------------------- 19/04/2024 - *
   .b-flexgroupx        @codekit-prepend "../../-cdn-wilma/_js-flexgroupx.js";

    <div class="b-flexgroupx | -testr" data-flexgroup_gap="3em" data-flexchild_basis="calc(50% - 3em)" data-flexchild_shrink=1 data-flexchild_grow=1 data-flexchild_mwidth="320px">
      <div>flexgroup</div>
      <div>flex<br>group</div>
      <div>flexgroup</div>
    </div><!-- b-flexgroup -->
 * -------------------------------------------------------------------------- */
.b-flexgroupx {
  display: flex;
  grid-gap: 0;
  flex-wrap: wrap;
  
  > * {
  //border: 1px dotted;
    flex-grow: inherit;
    flex-shrink: inherit;
    flex-basis: auto;
  } /* Childs */

  /* horizontale Ausrichtung items */
  &.-align-left    { justify-content: flex-start; }
  &.-align-center  { justify-content: center; }
  &.-align-right   { justify-content: flex-end; }
  &.-align-around  { justify-content: space-around; }
  &.-align-between { justify-content: space-between; }

  ///* vertikale Ausrichtung items */  
  &.-valign-top      { align-items: flex-start; }
  &.-valign-center   { align-items: center; }
  &.-valign-bottom   { align-items: flex-end; }
} /* .b-flexgroupx */



/* ------------------------------------------------------------- 30/01/2023 - *
   b-scrollbox-
   <div class="b-scrollbox-y | .-showline" style="max-height: 300px;">
 * -------------------------------------------------------------------------- */
.b-scrollbox-x {
  display: block;
  width: 100%;
//margin: auto; // 23/09/2023 deaktiviert
  padding-bottom: 16px; /* Space für Scrollbalken */ 
  overflow-x: auto;
  white-space: nowrap;
  
  > * { white-space: normal; }

  &.-showline { border-right: 1px dashed cyan; }
} /* b-scrollbox-x */
  
.b-scrollbox-y {
  width: 100%;
  margin: auto;
  display: block;
  overflow-y: auto;
  -ms-overflow-style: -ms-autohiding-scrollbar; /* (Win OS) filamentgroup.com/lab/scrollbars/ */
  padding-right: 16px; /* Space für Scrollbalken */

  &.-showline { border-bottom: 1px dashed cyan; }
} /* .b-scrollbox-y */



/* ------------------------------------------------------------- 07/01/2023 - *
   -taglabel
 * -------------------------------------------------------------------------- */
.-taglabel {
  display: inline-block;
  white-space: nowrap;
  min-width: 3ch;
  line-height: 1;
  text-align: center;
  margin: 2px 0;
  padding: 4px 8px;
  border-radius: 3px;
  
  &.-expand { width: 100%; }
  &.-dashed { border: 1px dashed; }
  &.-circled { border-radius: 1000px; }
} /* -taglabel */



/* ------------------------------------------------------------- 04/10/2022 - *
  .responsive-embed
  <div class="responsive-embed | widescreen">
    <iframe width="1280" height="720" src="https://www.youtube.com/embed/qs0ehqYlFEo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    ... oder mit iFrame API
    <div id="ytplayer"></div> 
  </div>
 * -------------------------------------------------------------------------- */
.responsive-embed {
//border: 1px solid red;
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
                 padding-bottom: 75.00%; /* 4:3 */
  &.widescreen { padding-bottom: 56.25%; /* 16:9 */ }

  /* Jedes folgende Element zb. iframe, object, embed, video, */
  > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
} /* .responsive-embed */



/* ------------------------------------------------------------- 30/01/2023 - *
   b-image-wrapper
   <p class="b-image-wrapper"><a href="#"><img src=""></a></p>
 * -------------------------------------------------------------------------- */
.b-image-wrapper {
  position: relative;
  overflow: hidden;
          img { transition: 1s; }
  &:hover img { transform: scale(1.15); }
} /* .b-image-wrapper */



/* ------------------------------------------------------------- 21/02/2024 - *
   .b-infobox
   <div class="b-infobox | -bgr-gray | -text-small | -corner-topR">Infobox</div>
 * -------------------------------------------------------------------------- */
.b-infobox {
  position: relative;
  overflow: hidden; /* Ribbon ready */
  padding: 1.5em;
  border-radius: 3px;  
  
  h2, h3, h4 { margin-bottom: .5em; }
  
  > *:first-child { margin-top: 0; }
  > *:last-child  { margin-bottom: 0; }

  &.-text-small,
  &.-text-smaller { padding: 1em 1.5em; }
  &.-autowidth { display: inline-block; }
  &.-dashed { border: 1px dashed rgba(var(--text-rgb), .3); }

  /* Status */
  &[class*="-icon-"] {    
    &:before {
      position: absolute; top: 50%; transform: translateY(-50%); /* vertical-center */      
      right: 1rem;
    } /* before */
  } /* class* */

  &[class*="-icon-info"]:before { font: normal 900 125%/1.5 'Font Awesome 6 Free'; content: '\f05a'; /* fa-circle-info */ }
  &[class*="-icon-done"]:before { font: normal 900 125%/1.5 'Font Awesome 6 Free'; content: '\f058'; /* fa-circle-check */ }
  &[class*="-icon-warn"]:before { font: normal 900 125%/1.5 'Font Awesome 6 Free'; content: '\f071'; /* fa-exclamation-triangle */ }

  /* Corner */
  &[class*="-corner"]:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-color: transparent;
  } /* before */
  
  &.-corner-topL:before { top: 0; left:  0; border-width: 1.5em 1.5em 0 0; border-top-color: var(--back-hex); }
  &.-corner-topR:before { top: 0; right: 0; border-width: 1.5em 0 0 1.5em; border-top-color: var(--back-hex); }
} /* .b-infobox */



/* ------------------------------------------------------------- 23/01/2024 - *
   .b-list
 * -------------------------------------------------------------------------- */
.b-list {
  list-style: none;
  margin: 0;
  padding: 0;
} /* .b-list */


ol.b-list { 
  list-style: decimal-leading-zero; 
  padding-left: 1.5em;
} /* ol.b-list */


/* -list-dashed */
.-list-dashed {    
  border: none; /* reset */
  > dd:not(:last-child):after,
  > li:not(:last-child):after { 
      content: ''; 
      display: block;
      margin: 0.25em 0;
      border-bottom: 1px dashed;
      opacity: .3;
    } /* > li */     
} /* -list-dashed */


/* -list-dblspace */
[class*="-list-dblspace"] { dd, li { line-height: 1.25; } }
.-list-dblspace1 { > dd:not(:first-child), > li:not(:first-child) { margin-top: 0.5em; } /* Abstand */ } /* -list-dblspace2 */
.-list-dblspace2 { > dd:not(:first-child), > li:not(:first-child) { margin-top: 1.0em; } /* Abstand */ } /* -list-dblspace2 */


/* -list-icon */
[class*="-list-icon-"] {
  > dd:before,
  > li:before {
    font: normal 900 85%/1 'Font Awesome 6 Free'; 
    content: '?';
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    width: 1.5em;
  //opacity: .5;
  } /* before */
  
  &[class*="-download"]   { > dd:before, > li:before { font-weight: 900; content: '\f019'; /* download */ } }
  &[class*="-plus"]       { > dd:before, > li:before { font-weight: 400; content: '\2b';   /* plus */ } }
  &[class*="-squareplus"] { > dd:before, > li:before { font-weight: 400; content: '\f0fe'; /* square-plus */ } }
  &[class*="-window"]     { > dd:before, > li:before { font-weight: 400; content: '\f2d2'; /* fa-window-restore */ } }
} /* -list-icon- */



/* ------------------------------------------------------------- 26/05/2023 - *
   -playbutton
    <a data-fancybox class="-playerbutton" href="https://www.youtube.com/watch?v=rK8he5LC98U">
      <img loading="lazy" width="100%" src="//img.youtube.com/vi/rK8he5LC98U/maxresdefault.jpg">
    </a>   
 * -------------------------------------------------------------------------- */
.-playbutton {
  //position: relative;
    
  &:before {
    font: normal 400 400%/1 'Font Awesome 6 Free';
    content: '\f144'; /* circle-play */
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* absolute-center */    
    color: White;
    opacity: .3;
    transition: .5s;
  }

  &:hover:before { opacity: .8; }
} /* .-playbutton */