@import url("https://www.fonts.endo7.net/nunito_font.css");
/* ===================== FONT ========================= */
@font-face {
    font-family: 'lightcase';
    src: url("fonts/lightcase.woff");
    font-weight: normal;
    font-style: normal;
}

/* ===================== VARIABLE CSS ========================= */
:root {
  --header-height: 3rem;
  /* =============== COLORS =============== */

  --main-color-first: #666666;
  --main-color-second: #fff;
  --main-color-third: #008f30;
  --main-color-fourth: #a3d7b5;
  --main-color-fifth: #cce9d6;

  --title-clr: #008f30;
  --menu-link-first: #000;
  --menu-link-second: #fff;

  --background-light: #f0f0f0;

  /* =============== Font and typography =============== */
  --body-font: "Nunito", sans-serif;
  /* .5rem = 8px, 1rem = 16px, 1.5rem = 24px */
  --fs-big: 30px;
  --fs-norm: 16px;
  --fs-small: 14px;

  --fs-menu-first: 18px;
  --fs-menu-scond: 25px;

  /* =============== Font weight =============== */
  --fw-light: 300;
  --fw-bold: 600;

}

/* ===================== VARIABLES DARK THEME ========================= */
body.dark-theme {
    /* HSL color mode */

  --main-color-first: #fff;
  --main-color-second: #666;
  --main-color-third: #fff;
  --main-color-fourth: #666;
  --main-color-fifth: #4b4b4b;
  
  --title-clr: #4b4b4b;
  --menu-link-first: #fff;
  --menu-link-second: #4b4b4b;

  --background-light: #4b4b4b;
}

* {
    font-family: var(--body-font)!important;
    color: var(--main-color-first);
}
#page {
    background: var(--main-color-second);
}

/* ==== Größen ==== */
h1, h1 *, h2, h2 *, h3, h3 *, h4, h4 *{
    color: var(--main-color-third);
}
body {
    font-size: var(--fs-norm);
}
h1, h1 * {
    font-size: var(--fs-big)!important;
    text-align: center;
}

h1.title *,
h1, h1 * {
    font-weight: var(--fw-bold);
}

strong {
    font-weight: var(--fw-bold);
}

nav#block-lebenshilfe-main-menu ul.nav.navbar-nav li a {
    font-size: var(--fs-menu-first);
    color: var(--main-color-first);
}
.change-theme:hover {
    color: white;
    background:var(--main-color-first);
    transform: rotate(360deg);
    transition: 1s;
    border-radius:50%;
}

.dark-theme .change-theme:hover {
    background:var(--background-light);
}
.dark-theme aside.featured-top__inner .nav.social li a::after {
    filter: invert(1);
}

.dark-theme nav#floating_section-left a.nav-link span {
    filter: invert(1);
}
.dark-theme nav#block-news li:hover {
    background:var(--main-color-first);
    color:var(--main-color-second);
}

.dark-theme nav#block-news li:hover a{
    color: var(--main-color-second)!important;
    transition: none;
}
.dark-theme nav#block-news .nav-link.active {
    background: var(--main-color-first)!important;
}
.dark-theme nav#block-news li.menu-item--active-trail a{
    color: var(--main-color-second)!important;
    transition: none;
}


aside.featured-top__inner .nav.social li a {
    font-size: var(--fs-menu-scond);
}

.aktuelles-social-inner a, .aktuelles-social-inner a:hover, .aktuelles-social-inner *,
div#block-views-block-jobangebote-block-1,
div#block-views-block-jobangebote-block-1 * {
    font-size: var(--fs-small);
}

/* ==== Abstände ==== */
.block {
    margin-block: 3rem 1rem;
}
.block-h1 {
    margin-bottom: 2rem;
}

img {
    max-width: 100%;
    height: auto;
}
div#main {
    margin-block: 35px 4vh;
}


/* Header wenn eingeloggt */
body.user-logged-in header#header{
    top:120px;
}
body.user-logged-in .featured-top {
    top: 240px;
}
body.user-logged-in div#main-wrapper {
    margin-top: 338px;
    min-height: 800px;
}

body.user-logged-in nav#floating_section-left .social {
    transform: translate(-170px,150px);
}
body.user.logged-in section.row.region.region-top-header-lang {
    
}
body.user-logged-in div#page .notfront {
    top: 250px;
}
/* body.user-logged-in nav#floating_section-left .social {
      top: 250px;
} */

.user-logged-in .top__header-wrapper {
    z-index: -1;
}

/* onscroll */
header#header, 
.featured-top,
div#page .notfront {
    position:fixed;
    width:100%;
}

header#header {
    top:0;
    background: var(--main-color-second);
    z-index:50000;
}
.featured-top {
    top:134px;
    z-index: 1000;
}
.scroll-header {
    z-index:2000;
    background: var(--main-color-second);
}
.featured-top.scroll-header {
    box-shadow: 0 1px 4px rgb(0 0 0 / 45%);
}
div#main-wrapper {
    margin-top: 350px;
}
.notfront div#main-wrapper {
    margin-top: 260px!important;
    padding-top: 5px
}
div#page .notfront {
    top: 130px;
    z-index:2005;
}

@media (max-width:680px){
    div#page .notfront {
        top: 120px!important;
    }
}

@media (max-width: 992px){
    .container, .container-lg, .container-md, .container-sm {
        max-width: 90%!important;
    }
}

div#sidebar_first:not(:has(nav)) {
    width: 0px!important;
    margin: 0;
    padding: 0;
}


footer h1 {
    font-size: 20px!important;
}

footer.site-footer * {
    font-size: 14px;
}

article .field.field--name-field-image img {
    max-width: 25dvw;
    margin: 0;
}






/*
<select data-theme-picker="" name="themepicker" id="theme">
    <option value="💻">System</option>
    <option value="☀️">Light</option>
    <option value="🌑">Dark</option>
    <option value="🙃">Don't pick</option>
  </select>


:root {
    --base: #cfcfcf; 
    --text: #212121;
}

@media (prefers-color-scheme:dark) {
    :root {
        --base: #212121; 
        --text: #cfcfcf;
    }

}
html {
    color-scheme: dark light;
}
body,
#page{
    background: var(--base);
    color:var(--text);
}
#page *{
    color:var(--text)!important;
}


:root:has(#theme [value="☀️"]:checked) {
  color-scheme: light;
  --base: #cfcfcf;
  --text: #212121;
}
:root:has(#theme [value="🌑"]:checked) {
  color-scheme: dark;
  --base: #212121;
  --text: #cfcfcf;
}
:root:has(#theme [value="🙃"]:checked) {
  --base: hotpink;
  --text: dodgerblue;
}

*/





/* Tag Wolke */
.featured-top {
    background: white;
    box-shadow: 0 0 10px;
}

div#block-lebenshilfe-blog-views-block-tag-wolke-block-1 {
    margin-block: 1rem!important;
}

.view-tag-wolke .view-content.row {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  line-height: 2.75rem;
  max-width: 650px;
  margin-inline:auto;
}

.view-tag-wolke .view-content.row a {
  /*   
  Not supported by any browser at the moment :(
  --size: attr(data-weight number); 
  */
  --size: 4;
  --color: #c40c3a;
  color: var(--color);
  font-size: calc(var(--size) * 0.25rem + 0.5rem);
  display: block;
  padding: 0.125rem 0.25rem;
  position: relative;
  text-decoration: none;
  /* 
  For different tones of a single color
  opacity: calc((15 - (9 - var(--size))) / 15); 
  */
}

.view-tag-wolke .view-content.row a[data-weight="1"] { --size: 1; }
.view-tag-wolke .view-content.row a[data-weight="2"] { --size: 2; }
.view-tag-wolke .view-content.row a[data-weight="3"] { --size: 3; }
.view-tag-wolke .view-content.row a[data-weight="4"] { --size: 4; }
.view-tag-wolke .view-content.row a[data-weight="5"] { --size: 6; }
.view-tag-wolke .view-content.row a[data-weight="6"] { --size: 8; }
.view-tag-wolke .view-content.row a[data-weight="7"] { --size: 10; }
.view-tag-wolke .view-content.row a[data-weight="8"] { --size: 13; }
.view-tag-wolke .view-content.row a[data-weight="9"] { --size: 16; }

ul[data-show-value] a::after {
  content: " (" attr(data-weight) ")";
  font-size: 1rem;
}

.view-tag-wolke .view-content.row div:nth-child(2n+1) a { --color: #a3b949; }
.view-tag-wolke .view-content.row div:nth-child(3n+1) a { --color: #2a75b6; }
.view-tag-wolke .view-content.row div:nth-child(4n+1) a { --color: #eeb642;}

.view-tag-wolke .view-content.row div afocus {
  outline: 1px dashed;
}

.view-tag-wolke .view-content.row div a:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: var(--color);
  transform: translate(-50%, 0);
  opacity: 0.15;
  transition: width 0.25s;
}

.view-tag-wolke .view-content.row div a:focus::before,
.view-tag-wolke .view-content.row div a:hover::before {
  width: 100%;
}

@media (prefers-reduced-motion) {
  .view-tag-wolke .view-content.row div a{
    transition: none !important;
  }
}
.view-tag-wolke .view-content.row div {
  width:auto;
}