@charset "UTF-8";
/*//////////////////////////////////////////////=============================
         STRANGER THINGS  //////////   © 2025 seltsam., Tim Gloystein
=============================//////////////////////////////////////////////*/

/*//////////////////////////////////////////////=============================
     FONTS
=============================//////////////////////////////////////////////*/
@font-face {
 font-family: 'BenguiatProITCBold';
 src: url('../fonts/strangerthings/Benguiat Pro ITC Bold.otf') format('opentype');
 font-weight: normal;
 font-style: normal;
}
@font-face {
 font-family: 'ITCAvantGardeGothicProBold';
 src: url('../fonts/strangerthings/ITC Avant Garde Gothic Pro Bold.otf') format('opentype');
 font-weight: normal;
 font-style: normal;
}
@font-face {
 font-family: 'ITCAvantGardeGothicProDemi';
 src: url('../fonts/strangerthings/ITC Avant Garde Gothic Pro Demi.otf') format('opentype');
 font-weight: normal;
 font-style: normal;
}
@font-face {
 font-family: 'Nove';
 src: url('../fonts/nove/nove-webfont.woff') format('woff');
 font-weight: normal;
 font-style: normal;
}
/*==========================/////////////////////==========================*/


/*//////////////////////////////////////////////=============================
     BASICS
=============================//////////////////////////////////////////////*/
:root {
 --eggwhite: #f7f1d2;
 --inkblack: #060606;
/* color: var(--orange);*/
}
body {
 font-family: "ITCAvantGardeGothicProDemi", Helvetica, Arial, sans-serif;
 background-image: linear-gradient(45deg, #ea0029 25%, #060606 25%, #060606 50%, #ea0029 50%, #ea0029 75%, #060606 75%, #060606 100%);
 background-size: 56.57px 56.57px;
 color: var(--eggwhite);
 position: relative;
}
/*==========================/////////////////////==========================*/


/*//////////////////////////////////////////////=============================
     STYLING
=============================//////////////////////////////////////////////*/
h1 {
 font-family: 'BenguiatProITCBold', sans-serif;
 text-transform: none;
 font-size: 3rem;
 line-height: 3.4rem;
 color: var(--eggwhite);
}
h2 {
 font-family: 'ITCAvantGardeGothicProBold', sans-serif;
 text-transform: none;
 font-size: 3.4rem;
 line-height: 3.6rem;
 margin-bottom: 2rem;
 color: var(--eggwhite);
}
h3 {
 font-family: 'ITCAvantGardeGothicProDemi', sans-serif;
 font-size: 2.4rem;
}
p {
 font-size: 2.0rem;
 line-height: 2.4rem;
 margin-bottom: 1.6rem;
}
p.small {
 font-size: 1.3rem;
 line-height: 1.5rem;
 text-align: left;
}
p.msg {
 font-family: 'ITCAvantGardeGothicProDemi', sans-serif;
}
ol {
 padding-left: 3rem;
 text-transform: uppercase;
}
ol.small {
 font-size: 1.5rem;
 font-weight: 500;
}
.btn-danger {
 color: var(--fontyellow);
 font-size: 1rem;
 width: 509px;
 height: 128px;
}
.btn-light {
 background: var(--white);
 color: var(--jangpink);
}
ol.upper-roman {
 list-style-type: upper-roman;
} 
ol.lower-alpha {
 list-style-type: lower-alpha;
} 
table {
 color: var(--eggwhite) !important;
 border-color: var(--eggwhite) !important;
 width: auto !important;
 font-size: 1.2rem !important;
 font-family: "ITCAvantGardeGothicProDemi", Helvetica, Arial, sans-serif;
}
.table-hover>tbody>tr:hover>* {
 color: #ea0029;
}
.anker {
 margin-bottom: 0;
}
label {
 color: var(--inkblack);
 font-family: "ITCAvantGardeGothicProDemi", Helvetica, Arial, sans-serif;
}
.pizzatainmentLogo {
 font-family: 'Nove', sans-serif;
}
.strangerthings .text-light {
 color: var(--eggwhite) !important;
}
.eleven {
 padding: 2.5rem;
}
/*==========================/////////////////////==========================*/


/*//////////////////////////////////////////////=============================
     LAYOUT
=============================//////////////////////////////////////////////*/
.strangerthings header #logo {
 position: relative;
 z-index: 1000;
 width: 200px;
 margin: 0 auto;
}
.strangerthings header #logo img {
 display: block;
 margin-top: 0px;
 transition: all 0.4s;
 width: 120px;
}
.strangerthings .page {
 position: relative;
 background-color: var(--inkblack);
 margin-top: 20px;
 padding-top: 60px;
 max-width: 90%;
 border: 4px solid #ff3333;

 box-shadow:
  /* Mehrschichtiger äußerer Glow */
  0 0 10px rgba(255, 0, 0, 1),
  0 0 20px rgba(255, 0, 0, 0.8),
  0 0 40px rgba(255, 50, 50, 0.6),
  0 0 60px rgba(255, 50, 50, 0.4),
  0 0 100px rgba(255, 0, 0, 0.3),
   /* Starker Innen-Glow */
  inset 0 0 20px rgba(255, 0, 0, 0.8),
  inset 0 0 40px rgba(255, 50, 50, 0.5),
  inset 0 0 60px rgba(255, 0, 0, 0.3),
  inset 0 0 80px rgba(200, 0, 0, 0.2);
}

//* Innere dunkle Linie - HELLER und weniger auffällig */
.strangerthings .page::before {
 content: '';
 position: absolute;
 top: 20px;
 left: 20px;
 right: 20px;
 bottom: 20px;
 border: 2px solid rgba(180, 50, 50, 0.3);  /* Heller + transparenter */
 pointer-events: none;
 box-shadow:
  inset 0 0 15px rgba(255, 0, 0, 0.2),     /* Weniger Intensität */
  0 0 8px rgba(180, 50, 50, 0.3);          /* Weniger Intensität */
}

/* Äußere dunkle Linie - dichter am Rahmen */
.strangerthings .page::after {
 content: '';
 position: absolute;
 top: -5px;      /* War -10px */
 left: -5px;     /* War -10px */
 right: -5px;    /* War -10px */
 bottom: -5px;   /* War -10px */
 border: 2px solid rgba(100, 0, 0, 0.3);
 pointer-events: none;
 box-shadow: 0 0 12px rgba(255, 0, 0, 0.5);
}

.strangePermission {
 position: absolute;
 bottom: 6rem;
 right: 10px;
 writing-mode: vertical-lr;
 transform: rotate(180deg);
}
.strangePermission p.small {
 line-height: 1rem;
}

.strangeBackground {
 position: relative;
 background-color: #000;
 padding: 30px;
 border: 3px solid #ff3333;
 border-radius: 8px; /* Optional, falls du abgerundete Ecken möchtest */

 box-shadow:
  /* Äußerer Glow */
  0 0 10px rgba(255, 0, 0, 1),
  0 0 20px rgba(255, 0, 0, 0.8),
  0 0 40px rgba(255, 50, 50, 0.6),
  0 0 60px rgba(255, 0, 0, 0.4),
   /* Innen-Glow */
  inset 0 0 20px rgba(255, 0, 0, 0.4),
  inset 0 0 40px rgba(255, 50, 50, 0.2);
}

/* Button mit Neon-Glow */
.btn-stranger {
 background-color: #fff;
 color: #000;
 border: 2px solid #ff3333;
 padding: 12px 40px;
 font-weight: bold;
 font-size: 2.4rem;
 letter-spacing: 1px;

 box-shadow:
  0 0 8px rgba(255, 0, 0, 0.8),
  0 0 15px rgba(255, 0, 0, 0.6),
  0 0 25px rgba(255, 0, 0, 0.4),
  inset 0 0 10px rgba(255, 0, 0, 0.2);

 transition: all 0.3s ease;
}
/* Button Hover-Effekt */
.btn-stranger:hover {
 background-color: #fff;
 color: #000;
 border-color: #ff3333;

 box-shadow:
  0 0 12px rgba(255, 0, 0, 1),
  0 0 20px rgba(255, 0, 0, 0.8),
  0 0 35px rgba(255, 0, 0, 0.6),
  0 0 50px rgba(255, 0, 0, 0.4),
  inset 0 0 15px rgba(255, 0, 0, 0.3);

 transform: translateY(-2px);
}

/* Button Active/Click-Effekt */
.btn-stranger:active {
 transform: translateY(0);
 box-shadow:
  0 0 8px rgba(255, 0, 0, 0.9),
  0 0 15px rgba(255, 0, 0, 0.7),
  inset 0 0 12px rgba(255, 0, 0, 0.4);
}
/*==========================/////////////////////==========================*/



/*//////////////////////////////////////////////=============================
     BREAKPOINTS BOOTSTRAP v5.2
=============================//////////////////////////////////////////////*/
/*// Small devices (landscape phones, 576px and up) //*/
@media (min-width: 576px) {
 .container {
  max-width: none;
 }
}
/*// Medium devices (tablets, 768px and up) //*/
@media (min-width: 768px) {
 .strangePermission {
  position: absolute;
  bottom: 18rem;
  right: 1rem;
  background-color: var(--inkblack);
 }
 h1 {
 font-size: 4rem;
 line-height: 4.4rem;
 }
}
/*// Large devices (desktops, 992px and up) //*/
@media (min-width: 992px) {
 .strangerthings .page {
  background-color: var(--inkblack);
  margin-top:20px;
 }
 h1 {
  font-size: 6rem;
  line-height: 6.4rem;
 }
 h2 {
  font-size: 4.5rem;
  line-height: 4.8rem;
 }
 p {
 font-size: 2.8rem;
 line-height: 3.2rem;
 margin-bottom: 1.6rem;
}
 p.small {
  font-size:1.5rem;
  line-height: 1.8rem;
 }
 ul {
  /*font-size: 1.4rem;
  line-height: 2.4rem;*/
 }
 .strangePermission {
  right: .5rem;
 }
 table {
  font-size: 1.5rem !important;
 }
}
/*// X-Large devices (large desktops, 1200px and up) //*/
@media (min-width: 1200px) {
 .strangerthings header #logo img {
  width: 200px;
  margin-top: 0px;
 }
 h1 {

 }
 h2 {
  font-size: 4.5rem;
 }
  p {
  font-size: 2.5rem;
  line-height: 3.8rem;
  margin-bottom: 1.6rem;
 }
 ol {
  font-size: 2.5rem;
  line-height: 3.8rem;
  margin-bottom: 1.6rem;
 }
 .strangerthings .page {
  margin-top:20px;
 }
}
/*// XX-Large devices (larger desktops, 1400px and up) //*/
@media (min-width: 1400px) { 
 .strangerthings .page {
  background-color:  var(--inkblack);
  margin-top:20px;
  max-width: 1320px;
 }
}
@media (min-width: 1780px) {
}
/*==========================/////////////////////==========================*/


/*//////////////////////////////////////////////=============================
     PRINT
=============================//////////////////////////////////////////////*/
@media print {
 * {
  background: transparent !important;
  color: #000 !important;
  box-shadow: none !important;
  text-shadow: none !important;
 }
 a, a:visited {
  text-decoration: underline !important;
  border: none !important;
 }
 a[href]:after {
  content: " ("attr(href) ")";
 }
 abbr[title]:after {
  content: " ("attr(title) ")";
 }
 .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
  content: "";
 }
 pre, blockquote {
  border: 1px solid #999;
  page-break-inside: avoid;
 }
 thead {
  display: table-header-group;
 }
 tr, img {
  page-break-inside: avoid;
 }
 img {
  max-width: 100% !important;
 }
 @page {
  margin: 0.5cm;
 }
 p, h2, h3 {
  orphans: 3;
  widows: 3;
 }
 h2, h3 {
  page-break-after: avoid;
 }
}