/******** NEUE GESUCHSVORLAGE ********/
.bear {
    --bg-color: #27312c;
    --wanted-title-color: #384940;
    
    --wanted-text-bg : #16161648;
    --wanted-text-color : #a2b1aa;
    --wanted-text-highlight : #41534b;

    --character-name-color: #384940;
    
    --character-info-color: #a2b1aa;
    
    --character-facts-color: #a2b1aa;
    --character-facts-tag: #324238;
    
    --character-text-color: #b6b6b6;
    --character-text-highlight: #6c756e;
    
    --character-image-color: #2a302d;
    
    --character-reserviert-color: #dde0de;
    --character-reserviert-bg: #aab3ab71;
    
    --character-vergeben-color: #d2dad6;
    --character-vergeben-bg: #595f5ada;
}

.leo {
    --bg-color: #3a2727;
    --wanted-title-color: #6b5353;
    
    --wanted-text-bg : #13131348;
    --wanted-text-color : #cfbcbc;
    --wanted-text-highlight : #7e4d4d;

    --character-name-color: #493838;
    
    --character-info-color: #b1a2a2;
    
    --character-facts-color: #b1a2a2;
    --character-facts-tag: #423232;
    
    --character-text-color: #b6b6b6;
    --character-text-highlight: #756c6c;
    
    --character-image-color: #2a302d;
    
    --character-reserviert-color: #e0dddd;
    --character-reserviert-bg: #b3aaaa71;
    
    --character-vergeben-color: #dad2d2;
    --character-vergeben-bg: #5f5959da;
}

.wolf {
    --bg-color: #272d3a;
    --wanted-title-color: #535d6b;
    
    --wanted-text-bg : #13131348;
    --wanted-text-color : #bcc4cf;
    --wanted-text-highlight : #4d627e;

    --character-name-color: #384149;
    
    --character-info-color: #a2a7b1;
    
    --character-facts-color: #a2a8b1;
    --character-facts-tag: #323942;
    
    --character-text-color: #b6b6b6;
    --character-text-highlight: #6c7175;
    
    --character-image-color: #2a2d30;
    
    --character-reserviert-color: #dddee0;
    --character-reserviert-bg: #aaacb371;
    
    --character-vergeben-color: #d2d5da;
    --character-vergeben-bg: #595b5fda;
}

.psy {
    --bg-color: #18191a;
    --wanted-title-color: #3e4146;
    
    --wanted-text-bg : #31313148;
    --wanted-text-color : #c5c5c5;
    --wanted-text-highlight : #bcc2ca;

    --character-name-color: #384149;
    
    --character-info-color: #afb2b8;
    
    --character-facts-color: #b3b3b4;
    --character-facts-tag: #424242;
    
    --character-text-color: #b6b6b6;
    --character-text-highlight: #7c7d7e;
    
    --character-image-color: #323333;
    
    --character-reserviert-color: #dddee0;
    --character-reserviert-bg: #afafb171;
    
    --character-vergeben-color: #d2d5da;
    --character-vergeben-bg: #666768da;
}

.wantedcontainer {
	font-family: var(--font-primary);
	justify-self: center;
	width: 570px;
	background-color: var(--bg-color);
	padding: 1.25rem;
	scrollbar-width: thin;
}

.wantedtitle {
	font-size: 2.25rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	padding: 1rem 0 1.5rem 0;
	color: var(--wanted-title-color);
	text-align: center;
}

.wantedtext {
	padding: 1.25rem; 
	background-color: var(--wanted-text-bg);
	color: var(--wanted-text-color);
	text-align: justify;
	min-height: 1.25rem;
	max-height: 12rem;
	overflow: auto;
}

.wantedtext i {
	color: var(--wanted-text-highlight);
}

.wantedtext b {
	color: var(--wanted-text-highlight);
}

.character {
	display: flex;
	flex-direction: column;
}

.character .title {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-transform: uppercase;
	gap: 0.25rem;    
}

.character .title.right {
	align-items: flex-end;
}

.character .title.right .info {
 	text-align: right;
}

.character .title.left {
    align-items: flex-start;
}

.character .name {
	font-size: 2.5rem;
    color: var(--character-name-color);
    text-transform: lowercase;
    padding-top: 0.5rem;
}

.character .info {
	font-size: 0.75rem;
	letter-spacing: 0.1em;
    color: var(--character-info-color);
    text-transform: uppercase;
}

.characterbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 15rem;
    gap: 0.5rem;
	padding-top: 0.5rem;
}

.character .facts {
    display: flex;
    flex: 1 1 25%;    
    flex-wrap: wrap;
    justify-content: flex-end;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	gap: 0.25rem;
    color: #e6ebe9;
}

.character .facts.right {
    justify-content: flex-start;
}

.character .facts .tag {    
    background-color: var(--character-facts-tag);
    padding: 0.125rem 0.25rem;
}

.character .text {
    flex: 1 1 50%;
    color: var(--character-text-color);
    max-height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    text-align: justify;
    padding-right: 0.25rem;
}

.character .text i {
    color: var(--character-text-highlight);
}

.character .text b {
    color: var(--character-text-highlight);
}

.character .image {
    margin: auto;
    overflow: hidden;
    position: relative;
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    flex: 1 1 25%;
    padding: 0.5rem; 
}

.character .image img {
    height: 120px;
    width: 120px;
    overflow: hidden;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 0.25rem solid var(--character-image-color);
}

.character .hover {
	background: var(--character-image-color); 
	opacity: 0; 
	transition: 1s;
	position: relative;
}

.character:hover {
	opacity: 0.9; 
	transition: opacity 1s ease;
}

.character .frei {}

.character .reserviert,
.character .vergeben {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    margin: 0.125rem 0 0 -1.25rem;
    pointer-events: none;
    width: 100%;
    height: 20rem;
	font-size: 2.5rem;
    font-weight: 500;
	letter-spacing: 0.1em;
    text-transform: lowercase;
	
	div {
		transform: rotate(-10deg);
	}
}

.character .reserviert {
    color: var(--character-reserviert-color);
    background-color: var(--character-reserviert-bg);
}

.character .vergeben {
    color: var(--character-vergeben-color);
    background-color: var(--character-vergeben-bg);
}

.hover-image {
	border-radius: 50%;
	width: 8.75rem;
	aspect-ratio: 1;
	overflow: hidden;
	border: 0.25rem solid grey;
	position: relative;
}

.animal-image, .character-image {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 8.75rem;
	aspect-ratio: 1;
}

.animal-image {
	transition: opacity 0.8s;
}

.animal-image:hover {
	opacity: 0;
}

.wantedinfo {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	color: var(--wanted-text-color);
	text-align: justify;
	padding: 1.25rem;
	background-color: var(--wanted-text-bg);
}

.wantedinfo .links {
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 0.25rem;
}

.wantedinfo a {
	text-decoration: none;
	font-family: var(--character-facts-font);
	font-size: 0.75rem;
	color: var(--character-facts-color);
	border: 1px solid var(--character-facts-color);
	padding: 0.125rem 0.25rem;
	background-color: var(--wanted-text-bg);
	transition: background-color 0.25s;
}

.wantedinfo a:hover {
	background-color: var(--character-facts-tag);
}