@import url(https://fonts.googleapis.com/css2?family=Space+Mono:wght@700&display=swap);

@import url(https://fonts.googleapis.com/css2?family=Special+Elite&family=Oswald:wght@700&display=swap);

.grunge-neon-headline {
    font-family: 'Special Elite', 'Oswald', sans-serif;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #f5f5f5;
    position: relative;
    display: block;
    padding: 23px 32px 14px 32px;
    background: #0d0d0d;
    border: 2px solid #d94b3d;
    border-radius: 6px;
    text-shadow: 2px 2px 0 #000,
    -1px -1px 0 #222,
    0 0 6px rgba(217,75,61,0.7),
    0 0 14px rgba(217,75,61,0.5);
    animation: neonFlicker 3s infinite;
    /* overflow: hidden; */
    margin: auto;
    margin: 0 auto;
    width: fit-content;
}

/* Ink-Splatter Effekt */
.grunge-neon-headline::before {
  box-shadow:
    -30px -20px 6px rgba(217,75,61,0.4),
    -50px 25px 8px rgba(255,255,255,0.05),
    -70px 10px 5px rgba(217,75,61,0.25);
}
.grunge-neon-headline::after {
  box-shadow:
    30px -18px 6px rgba(217,75,61,0.4),
    55px 20px 7px rgba(255,255,255,0.05),
    75px 12px 5px rgba(217,75,61,0.25);
}

/* Neon-Flacker Animation */
@keyframes neonFlicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow:
      2px 2px 0 #000,
      0 0 6px rgba(217,75,61,0.9),
      0 0 20px rgba(217,75,61,0.6);
    color: #fff;
  }
  20%, 24%, 55% {
    text-shadow: none;
    color: #444;
  }
}

.hx {
    font-size: 23px;
    text-transform: uppercase;
    letter-spacing: 0px;
    transition: 700ms ease;
    /* font-variation-settings: "wght" 311; */
    margin-bottom: -1.8rem;
    color: PaleGoldenRod;
    background: linear-gradient(to right, #A09577 0%, #FFC229 50%, #F8B500 51%, #A69461 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    outline: none;
    text-align: center;
    font-family: "Teko", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    text-shadow: 0 0 6px #0000008a;
}

.hx:hover {
  font-variation-settings: "wght" 582; 
  letter-spacing: 1px;
}

p {
    font-size: 14px;
    line-height: 150%;
    text-align: center;
    color: #919191;
    letter-spacing: .5px;
    font-family: 'calibri';
}

.hxR {
    font-size: 35px;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: 700ms ease;
    /* font-variation-settings: "wght" 311; */
    margin-bottom: -2rem;
    color: PaleGoldenRod;
    background: linear-gradient(to right, #A09577 0%, #FFC229 50%, #F8B500 51%, #A69461 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    outline: none;
    text-align: center;
    font-family: "Teko", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    text-shadow: 0 0 6px #0000008a;
}

.t_favhead {
    padding: 0px 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-style: italic;
    font-size: 12px;
}

.t_favdesc {
    padding: 0px 0px 8px 0px;
    letter-spacing: 0px;
    text-transform: none;
    font-style: normal;
    font-size: 11px;
    margin-top: -3px;
    line-height: 12px;
}

.tama_head {
    color: #00000061;
    text-transform: uppercase;
    letter-spacing: 0px;
    font-size: 47px;
    font-family: "Teko", sans-serif;
    text-align: center;
    line-height: 41px;
}

.tama_small {
    text-align: center;
    text-transform: uppercase;
    font-size: 13px;
    font-family: "Fredoka", sans-serif;
    color: #696969;
    margin-top: -30px;
    background: #171d1e;
    width: 100%;
    height: 10px;
    margin: -30px auto;
    z-index: 2;
    position: relative;
    line-height: 11px;
}

.tama_head2 {
    color: #00000061;
    text-transform: uppercase;
    letter-spacing: 0px;
    font-size: 38px;
    font-family: "Teko", sans-serif;
    text-align: center;
    line-height: 41px;
}

.tama_small2 {
    text-align: center;
    text-transform: uppercase;
    font-size: 11px;
    font-family: "Fredoka", sans-serif;
    color: #696969;
    margin-top: -30px;
    background: #171d1e;
    width: 100%;
    height: 8px;
    margin: -26px 0px 16px 0px;
    z-index: 2;
    position: relative;
    line-height: 10px;
}





.tae {
    flex: 1;
    line-height: .75;
    margin: auto;
    color: #396964;
    text-align: center;
    transform: scaleX(var(--scale, 1));
    animation: glitch-p 11s infinite alternate;
    font-family: "Geo", sans-serif;
    font-size: 29px;
margin-bottom: 10px;

  
&::before, &::after {
    --top: 0;
    --t-cut: calc(var(--n-tenth) / var(--f-size) * 100%);
    --b-cut: calc(var(--t-cut) + var(--v-height));
    content: attr(data-text);
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    transform: translateX(calc(var(--left) * 50%));
    text-shadow: calc(var(--left) * -3em) 0 .02em #00ff0063, calc(var(--left) * -6em) 0 .02em #ff00e169;
    background-color: var(--bg);
    clip-path: polygon(0% var(--t-cut), 100% var(--t-cut), 100% var(--b-cut), 0% var(--b-cut));
}
  
  &::before {
    animation: glitch-b 1.7s infinite alternate-reverse;
  }
  &::after {
    animation: glitch-a 3.1s infinite alternate;
  }
}

@keyframes glitch-p {
  17% { --scale: .87; }
  31% { --scale: 1.1; }
  37% { --scale: 1.3; }
  47% { --scale: .91; }
  87% { --scale: 1; }
}

@keyframes glitch-a {
  10%,30%,50%,70%,90% {
    --top: 0;
    --left: 0;
  }
  0% {
   --v-height: 15%; 
  }
  20% {
    --left: .005;
  }
  40% {
    --left: .01;
    --v-height: 20%;
    --top: 3;
  }
  60% {
    --left: .03;
    --v-height: 25%;
    --top: 6;
  }
  80% {
    --left: .07;
    --v-height: 5%;
    --top: 8;
  }
  100% {
    --left: .083;
    --v-height: 30%;
    --top: 1;
  }
}

@keyframes glitch-b {
    10%,30%,50%,70%,90% {
    --top: 0;
    --left: 0;
  }
  0% {
   --v-height: 15%; 
   --top: 10;
  }
  20% {
    --left: -.005;
  }
  40% {
    --left: -.01;
    --v-height: 17%;
    --top: 3;
  }
  60% {
    --left: -.03;
    --v-height: 35%;
    --top: 6;
  }
  80% {
    --left: -.07;
    --v-height: 5%;
    --top: 8;
  }
  100% {
    --left: -.083;
    --v-height: 30%;
    --top: 1;
  }
}

.tae_quote {
    text-align: center;
    text-transform: uppercase;
    font-size: 10px;
    line-height: 11px;
    font-style: italic;
    text-shadow: 3px 1px #3a6964ab;
}

.tae_abs {
    padding: 0px 10px;
}

.tae_border {
    display: grid;
    place-items: center;
    min-height: 200px;
    border: 7px solid;
    padding: 5px;
    border-width: 3px;
    border-image: repeating-radial-gradient(circle at -5px, #49e7c4, #ff50c2 4px, #9aff00 1px, #e57084 9px) 1;
    float: left;
    margin: 5px 7px;
}

.tae_border2 {
    display: grid;
    place-items: center;
    min-height: 150px;
    border: 7px solid;
    padding: 5px;
    border-width: 3px;
    border-image: repeating-radial-gradient(circle at -5px, #49e7c4, #ff50c2 4px, #9aff00 1px, #e57084 9px) 1;
    float: left;
    margin: 5px 12px 5px 0px;
}

.jin {
    position: relative;
    line-height: 24px;
    padding: 0 1rem;
    border-bottom: 3px solid #35454a;
    color: #5e5e5e;
    text-align: center;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-family: 'Alumni Sans';
    font-size: 20px;
    font-weight: 500;
    text-shadow: 0px 1px 0px black;
}

.jin::before,
.jin::after {
    position: absolute;
    left: 50%;
    transform:translate(-50%);
    bottom: -15px;
    width: 30px;
    height: 15px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}

.jin::before {
    background-color: #35454a;
}

.jin::after {
    bottom: -11px;
    background-color: #191f20;
}


/* Mafia Kapiteltrenner */
.chapter-divider {
    width: 100%;
    text-align: center;
    margin: 16px 0;
    position: relative;
}

.chapter-divider span {
    display: inline-block;
    padding: 10px 27px;
    font-family: 'Cinzel', serif;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: radial-gradient(circle at center, #5a0a0a 0%, #2e0202 100%);
    border: 2px solid #d4af37;
    border-radius: 7px;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05),
    0 0 25px rgba(0, 0, 0, 0.9);
    background-clip: padding-box;
    color: transparent;
    background-image: linear-gradient(135deg, #d4af37 0%, #f7e27c 30%, #b8860b 50%, #fff5b7 70%, #d4af37 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7),
    0 0 10px rgba(212,175,55,0.8);
    position: relative;
}

.chapter-divider span::before, .chapter-divider span::after {
    content: "✦";
    position: absolute;
    top: 53%;
    transform: translateY(-50%);
    color: #d4af37;
    font-size: 22px;
    text-shadow: 0 0 6px rgba(212,175,55,0.9);
}

.chapter-divider span::before {
  left: -35px;
}

.chapter-divider span::after {
  right: -35px;
}

/* Linien links & rechts, um den Divider zu strecken */
.chapter-divider::before, .chapter-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 25%;
    height: 2px;
    background: linear-gradient(to right, transparent, #d4af3773, transparent);
}

.chapter-divider::before {
  left: 0;
}

.chapter-divider::after {
  right: 0;
}

.frank-title {
    font-family: "Rubik Vinyl", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size: 21px;
    letter-spacing: 3px;
    text-transform: uppercase;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, #c23232 25%, #a17b4b 48%, #416f75 100%);
    text-shadow: 0 6px 12px rgba(0,0,0,0.8),
    -2px 2px 0 rgba(0,0,0,0.3),
    2px -2px 0 rgba(255,255,255,0.04);
    transform: skewX(-8deg);
    display: inline-block;
    position: relative;
    padding: 0 12px;
}

.frank-title::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 5%;
    width: 90%;
    height: 5px;
    background: linear-gradient(90deg, rgb(158 63 74 / 31%), rgb(61 106 111 / 76%));
    transform: skewX(-6deg);
    border-radius: 1px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

.ribbon {
    margin-top: 14px;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    color: rgb(145 145 145 / 90%);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

.frank-container {
    text-align: center;
}