/******** NEUE GESUCHSVORLAGE ********/

.bear {
    --bg-color: #27312c;
    --wanted-title-color: #384940;
    --wanted-title-font: 'Abril Fatface';
    
    --wanted-text-bg : #16161648;
    --wanted-text-color : #a2b1aa;
    --wanted-text-highlight : #41534b;
    --wanted-text-font : 'Raleway';

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

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

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

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

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

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

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



.wantedcontainer {
    width: 570px;
    background-color: var(--bg-color);
    padding: 20px;
}

.wantedtitle {
    font: 500 40px/40px var(--wanted-title-font);
    padding: 15px 0px 20px 0px;
    color: var(--wanted-title-color);
    letter-spacing: 1px;
    text-align: center;
}

.wantedtext {
    width: 520px;
    padding: 20px; 
    background-color: var(--wanted-text-bg);
    font: 400 12px/14px var(--wanted-text-font);
    color: var(--wanted-text-color);
    letter-spacing: 1px;
    text-align: justify;
    min-height: 20px;
    max-height: 190px;
    scrollbar-width: thin;
    overflow-y: auto;
}

.wantedtext i {
	font: italic 600 var(--wanted-text-font);
    color: var(--wanted-text-highlight);
    letter-spacing:1px;
}

.wantedtext b {
	font: 800 var(--wanted-text-font);
    color: var(--wanted-text-highlight);
    letter-spacing:1px;
}

.character {
    flex-direction: column;
    gap: 10px;
    height: 315px;
}

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

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

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

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

.character .name {
    font: 500 40px/35px var(--character-name-font);
    color: var(--character-name-color);
    text-transform: lowercase;
    padding-top: 10px;
}

.character .info {
    font: 400 12px/20px var(--character-info-font);
    color: var(--character-info-color);
    letter-spacing: 1px;
    text-transform: uppercase;
    
}

.characterbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 240px; 
    gap: 5px;
}

.character .facts {
    display: flex;
    flex: 1 1 25%;    
    flex-wrap: wrap;
    justify-content: flex-end;
    font: 400 10px/14px var(--character-facts-font);
    color: #e6ebe9;
    letter-spacing: 1px;
    gap: 4px;
}

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

.character .facts .tag {    
    background-color: var(--character-facts-tag);
    padding: 2px 4px;
}

.character .text {
    flex: 1 1 50%;
    font: 400 12px/13px var(--character-text-font);
    letter-spacing: 0.5px;
    color: var(--character-text-color);
    height: 180px;
    overflow-y: auto;
    scrollbar-width: thin;
    text-align: justify;
    padding: 5px 10px;
}

.character .text i {
	font: italic 500 12px/13px var(--chracter-text-font);
    color: var(--character-text-highlight);
}

.character .text b {
	font: 700 12px/13px var(--chracter-text-font);
    color: var(--character-text-highlight);
    letter-spacing:1px;
}

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

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

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

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

.character .frei {}

.character .reserviert{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    margin: 2.5px 0px 0px -20px;
    pointer-events: none;
    width: 610px;
    height: 310px;
    font: 500 40px/65px var(--character-reserviert-font);
    letter-spacing: 3px;
    text-transform: lowercase;
    color: var(--character-reserviert-color);
    background-color: var(--character-reserviert-bg);
}

.character .reserviert div {
    transform: rotate(-10deg);
}

.character .vergeben {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    margin: 2.5px 0px 0px -20px;
    pointer-events: none;
    width: 610px;
    height: 310px;
    font: 500 40px/65px var(--character-vergeben-font);
    letter-spacing: 3px;
    text-transform: lowercase;
    color: var(--character-vergeben-color);
    background-color: var(--character-vergeben-bg);
}

.character .vergeben div {
    transform: rotate(-10deg);
}

.hover-image {
        border-radius: 50%;
        width: 140px;
        aspect-ratio: 1;
        overflow: hidden;
        border: 5px solid grey;
        position: relative;
    }

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

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

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

.wantedinfo {
	display: flex;
	flex-direction: column;
	gap: 20px;
	font: 400 12px/14px var(--wanted-text-font);
	color: var(--wanted-text-color);
	letter-spacing: 1px;
	text-align: justify;
	padding: 20px;
	background-color: var(--wanted-text-bg);
}

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

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

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