body{
	font-family: 'MeineFont';
	background-color: #FCF9E8;
	width: 100dvw;
	height: 100dvh;
	overflow: hidden;
}


.hide-below-1140 {
    display: block;
}

.hide-at-1140 {
	display: block;
}

@media (max-width: 1139px) {
    .hide-below-1140 {
        display: none !important;
    }
		
}
@media (min-width: 1140px) {
    .hide-at-1140 {
        display: none !important;
    }
		
}



.cursor {
    display: inline-block;
    margin-left: 4px;
    opacity: 1; /* default sichtbar */
}

@keyframes blink {
    0%   { opacity: 1; }
    50%  { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}


.overflow_scroll{
	overflow: hidden;
}
.overflow_scroll2::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

.overflow_scroll2{
	overflow-y: scroll;
	scrollbar-width: none;   /* Firefox */
  -ms-overflow-style: none; /* IE/Edge alt */
}

.bg-mine2{
		background-color: #FCF9E8;

}

.just_my_stroke {
    resize: none;          /* Entfernt Resize-Dreieck */
    outline: none;         /* Entfernt Standard-Focus-Rand */
    box-shadow: none;      /* Entfernt Bootstrap Glow */
}

.just_my_stroke:focus {
    outline: none;
    box-shadow: none;
}

.nav-item.active {
    font-weight: 500;
    text-decoration: underline;
}


@font-face {
    font-family: 'MeinFont';
    src: url('portfolio_files/_assets/EBGaramond-VariableFont_wght.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}


p{
	padding: 0;
	margin: 0;
	font-size: 16;
	font-weight: 300;
	color: white;
	text-align: center;
}

.bg-mine{
	background-color: #130C45;
}
.bg-mine-light{
	background-color: #130c451d;
}
.text-mine{
	color: #130C45;
}

.round-1{
	border-radius: 12px;
}

.round-2{
	border-radius: 32px;
}

h1{
	font-size: 220px;
}

.my_stroke{
	border: #130C45 solid 3px;
	/* clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - 300px),
        calc(100% - 400px) 100%,
        0 100%
    ); */
		clip-path: inset(0 0 300px 0);
}

.just_my_stroke{
	border: #130C45 solid 3px;
	border-radius: 24px;
}

.zindex-front{
	z-index: 100000;
	pointer-events: none;
}



.responsive-box {
    /* width: 20dvw;
    height: 20dvh; */
		width: 250px;
}



/* .responsive-box {
    width: 126px;
    height: 90px;
}


@media (min-width: 576px) {
    .responsive-box {
        width: 126px;
    height: 90px;
    }
}


@media (min-width: 768px) {
    .responsive-box {
        width: 168px;
        height: 120px;
    }
}


@media (min-width: 992px) {
    .responsive-box {
        width: 224px;
        height: 166px;
    }
}


@media (min-width: 1200px) {
    .responsive-box {
        width: 267px;
        height: 191px;
    }
}


@media (min-width: 1400px) {
    .responsive-box {
        width: 309px;
        height: 221px;
    }
} */



.logo-container {
    position: relative;
    overflow: hidden;
}

.circle-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
}

.circle-logo {
    position: absolute;
    width: 100px;
    transform-origin: center;
    user-select: none;
    pointer-events: none;
}





.scrollbar {
  width: 1rem !important;
  height: 100%;
  border-radius: 10px;
  position: relative;
	flex-shrink: 0;
}

.scrollbar-thumb {
  width: 100%;
  border-radius: 10px;
  position: absolute;
  top: 0;
  height: 50px; /* wird dynamisch gesetzt */
  cursor: grab;
}




.img-box {
  flex: 1;               /* verteilt gleichmäßig die Höhe */
  overflow: hidden;      /* wichtig fürs Cropping */
  position: relative;
}

.full-image-box{
	height: 100%;
}


p.selected{
	font-weight: 500;
	text-decoration: underline;
}

.img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* DAS ist der Gamechanger */
  object-position: center;
  display: block;
	border-radius: 16px;
	border: #130C45 3px solid;
	overflow: hidden;
}

.full_image_container{
	border-radius: 16px;
	border: #130C45 3px solid;
	overflow: hidden;
}

.full-image-box img {
  height: 100%;
  object-fit: contain;   /* statt cover */
  object-position: center;
  display: block;
}

.img-box.big {
  flex: 2;               /* doppelt so groß */
}

.cursor-pointer{
	cursor: pointer;
}





.carousel-item {
    height: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.carousel-item img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}




.full_image_container {
    position: relative;
    overflow: hidden;
}

.bg-layer {
    position: absolute;
    inset: 0;
    transition: opacity 1s ease;
}

.bg1 { opacity: 1; }
.bg2 { opacity: 0; }

.full_image_container > *:not(.bg-layer) {
    position: relative;
    z-index: 1;
}