@charset "utf-8";
/* CSS Document */


	/* Firefox */
*{
  scrollbar-width:thin;
  scrollbar-color:#8aa85a #fff9dc;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar{
  width:8px;
  height:8px;
}

::-webkit-scrollbar-track{
  background:#fff9dc;
  border-radius:20px;
}

::-webkit-scrollbar-thumb{
  border-radius:20px;

  background:
    linear-gradient(
      180deg,
      #fff2a8,
      #e0c15a,
      #8aa85a
    );

  box-shadow:
    0 0 6px #fff7a8,
    0 0 12px rgba(255,215,95,.6),
    0 0 18px rgba(255,215,95,.25);
}

::-webkit-scrollbar-thumb:hover{
  background:
    linear-gradient(
      180deg,
      #ebcc67,
      #7ea250
    );

  box-shadow:
    0 0 14px rgba(255,215,95,.6);
}

::-webkit-scrollbar-corner{
  background:#fff9dc;
}
body{
  margin:0;
  padding:40px;
  background:
    radial-gradient(circle at 18% 18%,rgba(255,225,135,.22),transparent 28%),
    radial-gradient(circle at 82% 78%,rgba(147,190,117,.22),transparent 32%),
    linear-gradient(135deg,#fbf4dc,#edf1cf,#dfe9c0);
  font-family:'Nunito Sans',sans-serif;
}

.hotarubi-layout{
  width:1100px;
  max-width:100%;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  border-radius:28px;
  background:rgba(255,252,236,.86);
  color:#4c5138;
  font-family:'Nunito Sans',sans-serif;
  font-size:12px;
  line-height:1.8;
  border:20px solid rgba(255,255,255,.15);

}

.hotarubi-fireflies{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:15;
}

.hotarubi-header{
  height:350px;
  position:relative;
  overflow:hidden;
}

.hotarubi-header img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.96) saturate(.9) sepia(.14);
  animation:hotarubiHeader 16s ease-in-out infinite alternate;
}

.hotarubi-header::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg,rgba(255,252,230,.90),rgba(207,224,158,.52),rgba(255,207,91,.32)),
    radial-gradient(circle at 75% 35%,rgba(255,244,159,.45),transparent 22%);
}

.hotarubi-titlebox{
  position:absolute;
  left:58px;
  bottom:50px;
  z-index:4;
}

.hotarubi-title{
  display:inline-block;

  font-family:'Imperial Script',cursive;

  font-size:135px;

  line-height:.72;

  color:#5f7137;

  letter-spacing:1px;

  font-weight:400;

  position:relative;

  text-shadow:
    0 0 18px rgba(255,222,112,.65),
    0 0 34px rgba(132,174,95,.30);

  animation:
  hotarubiTitleFloat 4s ease-in-out infinite alternate;
}
  
  .hotarubi-title::first-letter{
  font-size:150px;

  color:#d8b25d;
}

.hotarubi-title::after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  bottom:-10px;
  height:8px;
  border-radius:20px;
  background:linear-gradient(90deg,transparent,#ffd86b,#94b86a,transparent);
  filter:blur(.5px);
  animation:hotarubiUnderline 3s ease-in-out infinite alternate;
}

.hotarubi-sub{
  margin-top:22px;
  color:#9b742e;
  text-transform:uppercase;
  letter-spacing:4px;
  font-size:10px;
  font-weight:800;
}

.hotarubi-body{
  display:grid;
  grid-template-columns:295px 1fr;
  gap:18px;
  padding:18px;
  background:
    radial-gradient(circle at 20% 15%,rgba(255,221,126,.16),transparent 25%),
    radial-gradient(circle at 85% 82%,rgba(132,174,95,.15),transparent 28%),
    rgba(255,250,235,.76);
}

.hotarubi-sidebar,
.hotarubi-mainbox,
.hotarubi-card,
.hotarubi-widget{
  background:rgba(255,255,244,.78);
  border-radius:22px;
  box-shadow:0 10px 30px rgba(130,145,82,.10);
  backdrop-filter:blur(6px);
  position:relative;
  overflow:hidden;
}

.hotarubi-sidebar,
.hotarubi-mainbox{
  padding:20px;
}
  
 
  
  .hotarubi-title::first-letter{
  font-size:150px;

  color:#d8b25d;
}

.hotarubi-h2{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 16px;
  font-family:'Imperial Script',cursive;
  font-size:48px;
  line-height:.82;
  font-weight:400;
  background:linear-gradient(90deg,#e0c15a,#8aa85a);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:
    0 0 18px rgba(255,222,112,.45),
    0 0 26px rgba(132,174,95,.18);
}

.hotarubi-h2::before,
.hotarubi-h2::after{
  content:"";
  flex:1;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#e0c15a,#8aa85a);
}

.hotarubi-h2::after{
  background:linear-gradient(90deg,#8aa85a,#e0c15a,transparent);
}



.hotarubi-h3{
  margin:0 0 9px;
  color:#8aa85a;
    border-bottom:1px dotted transparent;
  border-image:linear-gradient(90deg,#e0c15a,#8aa85a) 1;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:10px;
  font-weight:800;
  padding: 4px;
  padding-left: 6px;
  width: 60%;
  text-align: left;
}

.hotarubi-menu{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.hotarubi-menu-section{
  background:linear-gradient(135deg,#fffce9,#eee6b8)!important;
  border-radius:18px!important;
  overflow:hidden!important;
  padding:0!important;
  box-sizing:border-box!important;
  box-shadow:0 6px 18px rgba(173,163,93,.14);
}
  
  
  .hotarubi-menu-section:only-child .hotarubi-menu-title,
.hotarubi-menu-section:last-child .hotarubi-menu-title{
  border-radius:
  18px 18px 0 0;
}


.hotarubi-menu-title{
  margin:0!important;
  height:30px!important;
  line-height:30px!important;

  padding:0 12px!important;
  box-sizing:border-box!important;

  display:block!important;
  width:100%!important;

  background:linear-gradient(90deg,#94b86a,#7fa15c)!important;
  color:#fff9dc!important;

  font-size:9px!important;
  text-transform:uppercase!important;
  letter-spacing:2px!important;
  font-weight:800!important;

  border-radius:18px 18px 0 0!important;
  overflow:hidden!important;
}

.hotarubi-menu-title i{
  color:#fff9dc;
  margin-right:7px;
}
	
	/* SYSTEM LOG

"Stalker" hat style.css geöffnet.

Mögliche Gründe:
- CSS lernen .......... 0%
- Inspiration suchen .. 0%
- Link im Google Hate Sheet verlinken .......... 50%
- Hate verbreiten .......... 50%

*/

.hotarubi-menu-links{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:6px;

  padding:
  14px 7px 10px;

  box-sizing:border-box;
}

.hotarubi-menu-links a{
  height:23px;
  line-height:23px;
  position:relative;
  overflow:hidden;
  border-radius:20px;
  background:#fff9dc;
  color:#687045!important;
  text-align:center;
  text-decoration:none!important;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:8px;
  font-weight:800;
  transition:.35s ease;
}

.hotarubi-menu-links a::before,
.hotarubi-menu-links a::after{
  content:"";
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#fff7a8;
  box-shadow:0 0 8px #fff7a8,0 0 16px #ffd75f;
  opacity:0;
  pointer-events:none;
}

.hotarubi-menu-links a::before{
  left:12px;
  top:9px;
}

.hotarubi-menu-links a::after{
  right:12px;
  top:9px;
}

.hotarubi-menu-links a:hover{
  background:linear-gradient(90deg,#d9b45f,#9fb96f);
  color:#fff!important;
  transform:translateY(-1px);
  box-shadow:0 0 16px rgba(255,215,95,.35);
}

.hotarubi-menu-links a:hover::before{
  animation:hotarubiLinkFlyA 1.2s ease-in-out infinite;
  opacity:1;
}

.hotarubi-menu-links a:hover::after{
  animation:hotarubiLinkFlyB 1.4s ease-in-out infinite;
  opacity:1;
}

.hotarubi-sidebox{
  margin-top:14px;
  background:#fff9dc;
  border-radius:18px;
  padding:15px;
  text-align:justify;
}

/* Nein, hier versteckt sich nichts. */
	
.hotarubi-sidebox i{
  color:#c99b3f;
  margin-right:6px;
}

.hotarubi-main{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.hotarubi-text{
  height:auto;
  overflow-y:auto;
  padding-right:8px;
  text-align:justify;
  font-size:12px;
}

.hotarubi-text::-webkit-scrollbar{
  width:4px;
}

.hotarubi-text::-webkit-scrollbar-thumb{
  background:linear-gradient(#8aa85a,#d9b45f);
  border-radius:10px;
}

.hotarubi-text b,
.hotarubi-bold{
  background:#f4e5a7;
  color:#596b35;

  padding:2px 8px;
  border-radius:20px;
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:1px;
  font-weight:800;
}

.hotarubi-text i,
.hotarubi-italic{
  color:#8c6d2e;
  font-style:italic;
  background:rgba(255,249,220,.55);
  padding:1px 5px;
  border-radius:10px;
}
	
	/* Wirklich nicht. */

.hotarubi-text u,
.hotarubi-under{
  text-decoration:none;
  color:#6b7b3d;
  background:linear-gradient(transparent 58%,rgba(255,211,106,.55) 42%);
  padding:0 3px;
}

.hotarubi-text a,
.hotarubi-link{
  color:#8a6a25!important;
  text-decoration:none!important;
  font-weight:800;
  position:relative;
  padding:0 4px;
  transition:.35s ease;
}

.hotarubi-text a::after,
.hotarubi-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:100%;
  height:2px;
  border-radius:20px;
  background:linear-gradient(90deg,#ffd36a,#8aa85a);
  transform:scaleX(.35);
  transform-origin:left;
  transition:.35s ease;
}

.hotarubi-text a:hover,
.hotarubi-link:hover{
  color:#596b35!important;
  background:rgba(255,247,168,.35);
  border-radius:10px;
}

.hotarubi-text a:hover::after,
.hotarubi-link:hover::after{
  transform:scaleX(1);
}

.hotarubi-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
}

.hotarubi-card{
  padding:18px;
  min-height:125px;
  transition:.4s ease;
}

.hotarubi-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top right,rgba(255,225,115,.25),transparent 35%);
  opacity:0;
  transition:.4s ease;
}

.hotarubi-card:hover{
  transform:translateY(-6px);
  box-shadow:0 14px 32px rgba(132,150,73,.20);
}

.hotarubi-card:hover::before{
  opacity:1;
}

.hotarubi-card i{
  color:#c99b3f;
  font-size:21px;
  margin-bottom:10px;
  transition:.35s ease;
}

.hotarubi-card:hover i{
  transform:scale(1.15) rotate(-8deg);
  color:#8aa85a;
}

.hotarubi-card b{
  display:block;
  color:#596b35;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:9px;
  margin-bottom:6px;
}

.hotarubi-widgets{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:12px;
}

.hotarubi-widget{
  padding:17px;
}

.hotarubi-bar{
  height:8px;
  background:#ebe8c4;
  border-radius:20px;
  overflow:hidden;
  margin:8px 0;
}

.hotarubi-bar span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,#8aa85a,#ffd36a);
  border-radius:20px;
  animation:hotarubiBar 3s ease-in-out infinite alternate;
}
	
	/* Du bist immer noch hier? 😭 */

.hotarubi-quote{
  font-family:'Fraunces',serif;
  font-size:32px;
  line-height:1.05;
  color:#596b35;
}

.hotarubi-footer{
  background:linear-gradient(90deg,#eef0c8,#fff3c9,#dce8bb);
  padding:16px 30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#8b7436;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:2px;
}

.hotarubi-footer a{
  position:relative;
  color:#596b35!important;
  text-decoration:none!important;
  margin-left:10px;
  font-weight:800;
}

.hotarubi-footer a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:0;
  height:1px;
  background:#d9b45f;
  transition:.35s ease;
}

.hotarubi-footer a:hover::after{
  width:100%;
}

.firefly{
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#fff7a8;
  box-shadow:0 0 8px #fff7a8,0 0 18px #ffd75f,0 0 28px rgba(255,215,95,.7);
  opacity:.8;
  animation:fireflyFloat linear infinite;
}

@keyframes fireflyFloat{
  from{transform:translate(0,0) scale(.7);opacity:.25;}
  40%{opacity:1;}
  to{transform:translate(var(--x),var(--y)) scale(1.2);opacity:.15;}
}

@keyframes hotarubiHeader{
  from{transform:scale(1);}
  to{transform:scale(1.07);}
}

@keyframes hotarubiTitleFloat{
  from{transform:translateY(0);}
  to{transform:translateY(-5px);}
}

@keyframes hotarubiUnderline{
  from{opacity:.45;transform:scaleX(.55);}
  to{opacity:1;transform:scaleX(1);}
}

@keyframes hotarubiBar{
  from{width:38%;}
  to{width:92%;}
}

@keyframes hotarubiLinkFlyA{
  0%{transform:translate(0,0) scale(.7);opacity:.2;}
  50%{transform:translate(8px,-6px) scale(1.1);opacity:1;}
  100%{transform:translate(18px,3px) scale(.8);opacity:.2;}
}

@keyframes hotarubiLinkFlyB{
  0%{transform:translate(0,0) scale(.7);opacity:.2;}
  50%{transform:translate(-8px,6px) scale(1.1);opacity:1;}
  100%{transform:translate(-18px,-3px) scale(.8);opacity:.2;}
}
	
	@keyframes hotarubiBlink{

  0%{
    opacity:.35;

    transform:
      scale(.7);
  }

  50%{
    opacity:1;

    transform:
      scale(1.25);
  }
		
		/* Hast du kein Leben?­ */

  100%{
    opacity:.55;

    transform:
      scale(.9);
  }

}
	
	.hotarubi-menu-title{
  position:relative;
  transition:.35s ease;
}

.hotarubi-menu-section:hover .hotarubi-menu-title{

  background:
    linear-gradient(
      90deg,
      #d9b45f,
      #9fb96f
    )!important;

  color:#fff!important;

  box-shadow:
    0 0 16px rgba(255,215,95,.35);
}

.hotarubi-menu-title::before,
.hotarubi-menu-title::after{
  content:"";
  position:absolute;

  width:5px;
  height:5px;

  border-radius:50%;

  background:#fff7a8;

  box-shadow:
    0 0 8px #fff7a8,
    0 0 16px #ffd75f;

  opacity:0;

  pointer-events:none;
}

.hotarubi-menu-title::before{
  left:14px;
  top:12px;
}

.hotarubi-menu-title::after{
  right:14px;
  top:12px;
}

.hotarubi-menu-section:hover .hotarubi-menu-title::before{
  animation:hotarubiLinkFlyA 1.2s ease-in-out infinite;
  opacity:1;
}

.hotarubi-menu-section:hover .hotarubi-menu-title::after{
  animation:hotarubiLinkFlyB 1.4s ease-in-out infinite;
  opacity:1;
}
	
	.hotarubi-cookie{
    position:fixed;
    bottom:25px;
    right:25px;
    width:320px;

    background:rgba(255,255,244,.92);
    backdrop-filter:blur(8px);

    border-radius:22px;

    box-shadow:
        0 10px 30px rgba(130,145,82,.15),
        0 0 20px rgba(255,215,95,.15);

    overflow:hidden;
    z-index:9999;
}

.hotarubi-cookie-title{
    background:linear-gradient(
        90deg,
        #94b86a,
        #7fa15c
    );

    color:#fff9dc;

    padding:12px 16px;

    text-transform:uppercase;
    letter-spacing:2px;
    font-size:10px;
    font-weight:800;
}

.hotarubi-cookie-title i{
    margin-right:6px;
}

.hotarubi-cookie-text{
    padding:16px;
    color:#687045;
    font-size:11px;
    line-height:1.8;
}

.hotarubi-cookie-buttons{
    display:flex;
    gap:8px;
    padding:0 16px 16px;
}

.hotarubi-cookie-buttons button{
    flex:1;
    border:none;
    cursor:pointer;

    height:34px;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            #d9b45f,
            #9fb96f
        );

    color:#fff;
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px;

    transition:.35s ease;
}

.hotarubi-cookie-buttons button:hover{
    transform:translateY(-2px);

    box-shadow:
        0 0 14px rgba(255,215,95,.35);
}

.hotarubi-cookie-buttons .secondary{
    background:#fff9dc;
    color:#687045;
}