@font-face {  
	font-family: "YoungSerif-Regular";
	font-display: auto;
	src: url(https://www.buffymagazin.de/CamdenVillage/fonts/YoungSerif-Regular.woff2) format("woff2"), url(https://www.buffymagazin.de/CamdenVillage/fonts/YoungSerif-Regular.ttf) format("truetype"),
		url(../../../fonts/YoungSerif-Regular.woff) format("woff");
	font-weight: normal;
}

@font-face {  
	font-family: "YoungSerif-Bold";
	font-display: auto;
	src: url(https://www.buffymagazin.de/CamdenVillage/fonts/YoungSerif-Bold.woff2) format("woff2"), url(https://www.buffymagazin.de/CamdenVillage/fonts/YoungSerif-Bold.ttf) format("truetype"),
		url(https://www.buffymagazin.de/CamdenVillage/fonts/YoungSerif-Bold.woff) format("woff");
	font-weight: normal;
}



.lists {
     display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
 }
        
        /*         Menu        */
        
.lists_menu {
     /*flex: 0 0 auto;*/
    min-width: 200px;
    max-width: 30%;
    display: flex;
    flex-direction: column;
    padding: 5px;
    overflow-wrap: break-word;
    word-break: break-word;
}
  
.lists_menu2 {
            width: 20%;
            display: flex;
            flex-direction: column;
            gap: 10px;
            background: var(--farbe5);
            align-items: flex-start;
        /* padding-bottom: 10px; * Hier nutzen, wenn du nicht willst, dass das Menü dieselbe Länge hat wie der Content-Block. */
}
.lists2_menu {
            width: 25%;
            display: flex;
            flex-direction: column;
            gap: 10px;
            background: var(--farbe5);
            align-items: flex-start;
        /* padding-bottom: 10px; * Hier nutzen, wenn du nicht willst, dass das Menü dieselbe Länge hat wie der Content-Block. */
        }

.lists_menu-head {
            min-height: 50px;
            width: 100%;
            background: var(--background3);
            display: flex;
            justify-content: center;
            font-weight: bold;
            align-items: center;
            text-align: center;
            padding: 0 5px;
            box-sizing: border-box;
            text-transform: uppercase;
			color:var(--text2);
			letter-spacing: 0.1em;
    overflow-wrap: break-word;
    word-break: break-word;
		font-family: "YoungSerif-Bold", sans-serif;
font-size: 15px;

 }

.lists_menu-head  a:link {
            color: var(--farbe8);
	cursor: pointer;
			
}


.lists_menu-item {
            font-family: "YoungSerif-Bold", sans-serif;
            text-decoration: none;
            text-transform: uppercase;
	        line-height: 1.4;
            font-size: 12px;
            letter-spacing: 0.1em;  
            min-height: 25px;
    width: 100%;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border-bottom: 1px solid var(--linie1);
    background: var(--background4);
    overflow-wrap: break-word;
    word-break: break-word;
           
           
 }
        
.lists_menu-item a {
    color: var(--links);
    text-decoration: none;
    text-transform: uppercase;
        
}
.lists_menu-item:hover {
    background: var(--hover1);
	opacity: 0.7; 
	  transition: background 0.2s ease;
}       

.lists_menu-item:hover a {
    color: var(--hover2);
	  transition: background 0.2s ease;
}
        /*         Content       */
        
        
.lists_content {
    width: 80%;
    box-sizing: border-box;
    background: var(--background);
    background-repeat: no-repeat;
    background-size: cover;

}
    
.lists_content2 {
    flex: 1 1 auto;
    box-sizing: border-box;
    padding: 5px 20px;
    text-align: justify;
    line-height: 180%;
    font-size: 13px;
    font-family: Cambria, Georgia, serif;
	
}

.lists_content-head {
            height: 50px;
            width: 100%;
            background: #3e485c;
            font-size: 22px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            text-transform: uppercase;
			color: #fff;
			font-family: "YoungSerif-Bold", sans-serif;
        }
        
.lists_content-description {
            
    font-size: 13px;
    margin: auto;
    padding: 20px;
    text-align: justify;
    border: 1px solid var(--linie1);
    border-radius: 5px;
    width: 90%;
    margin-bottom: 30px;
    color: var(--text1);
        }
.lists_content-description_head {
            padding: 20px 40px;
            text-align: justify;
            line-height: 180%;
            font-size: 18px;
        }   
.lists_content-bit {    
            padding: 0 20px 40px 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 20px;
        }
        
.lists_statistik-bit {    
            padding: 0 20px 20px 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: normal;
            gap: 20px;
        }
.lists_content-block {
            width: 30%;    /* Wenn du drei Spalten willst, gib hier 30% an. Beachte, dass du diesen Wert je nach Breite des Forums und des Inhalts anpassen musst, um ein zufriedenstellendes Ergebnis zu erhalten. */
        }
        
.lists_content-item {
            margin-bottom: 5px;
			margin-top: 5px;
            margin-left: 5px;

        }
.lists_list_bit{
	width: 100%;
    background: #d8dee5;
    border-top: 3px solid #3e485c;
    text-align: center;
    color: #3e485c;
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: 2px;
    padding: 3px;
    margin-bottom: 15px;
}

.lists_list_bit2{
	width: 100%;
    background: #d8dee5;
    border-top: 3px solid #3e485c;
    text-align: center;
    color: #3e485c;
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: 2px;
    padding: 3px;
        margin-bottom: 5px;
    margin-top: 15px;
}
.gone_infotext {
    font-size: 13px;
    margin: auto;
    padding: 10px 20px 10px 20px;
    text-align: justify;
    display: flex;
    border: 1px solid var(--linie1);
    border-radius: 5px;
    background: var(--background);
    width: 80%;
    margin-top: 30px;
    margin-bottom: 30px;
    color: var(--text1);
}

.info-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;           /* Standard volle Breite für Desktop / mittlere Geräte */
    max-width: 900px;     
    margin: 15px auto;     
    padding: 0 10px;       
    box-sizing: border-box;
    counter-reset: rowNumber; /* Zähler starten */
}

/* Auf kleineren Handys etwas Rand links/rechts */
@media (max-width: 768px) {
    .info-container {
        width: 90%;         /* 10% Rand insgesamt, 5% links/rechts */
        padding: 0 5px;     
    }
}

.info-row {
    display: flex; /* Zellen nebeneinander */
    gap: 10px;
    border-bottom: 1px solid var(--linie4); /* Trennlinie zwischen den Zeilen */
    padding: 8px 10px;
    counter-increment: rowNumber; /* Jede Zeile hochzählen */
}

/* Nummern-Spalte */
.info-row .info-number::before {
    content: counter(rowNumber);
    display: block;
    font-weight: bold;
    text-align: left;
}

/* Nummern-Spalte schmaler, Rest flexibel */
.info-row .info-number {
    flex: 0 0 40px;     /* feste Breite */
    padding-right: 5px;
}

.info-row .info-cell:not(.info-number) {
    flex: 1 1 0;        /* restliche 3 Spalten teilen sich den Platz */
   margin-left: -8px;
}

.info-row:last-child {
    border-bottom: none;
}

.info-cell {
    text-align: left; /* linksbündig */
    word-break: break-word; /* lange Texte umbrechen */
    line-height: 1.4;
    padding: 0 5px;
}

/* Optional: Header für die Spalten */
.info-header {
    display: flex;
    font-weight: bold;
    background: var(--background4);
    color: var(--text3);
    padding: 10px 10px;
}

/* Header: gleiche Spaltenaufteilung wie Zeilen */
.info-header .info-cell:first-child {
    flex: 0 0 190px;     /* feste Breite für Nummern-Spalte */
    padding-left: 5px;
}

.info-header .info-cell2:first-child {
    flex: 0 0 40px;     /* feste Breite für Nummern-Spalte */
    padding-left: 5px;
}

.info-header .info-cell2:not(:first-child) {
    flex: 1 1 0;        /* restliche 3 Spalten flexibel */
}

.gone_ueber {
	line-height: 1.4;
    font-family: "YoungSerif-Bold", sans-serif;
    font-size: 19px;
    text-transform: uppercase;
    color: var(--text3);
    text-align: center;
}

.gone_entry {
	background: var(--background);
    padding: 20px 40px;
    text-align: justify;
    line-height: 180%;
    font-size: 14px;
}
.info-content {
    padding: 10px;
}

/*NPC LISTE */

.person-container {
    max-width: 900px;
    margin: 15px auto;
    padding: 10px;
    background: var(--background);    
    counter-reset: personNumber;
}

.person-card {
    display: flex;
    gap: 15px;
    padding: 10px 0;
    border-bottom: 1px solid var(--linie4);
    counter-increment: personNumber;
}

.person-card:last-child {
    border-bottom: none;
}

.person-number {
    flex: 0 0 10px;
    font-weight: bold;
    font-size: 1.1em;
    text-align: left;
    color: var(--text3);
    margin-left: 45px;
}

.person-number::before {
    content: counter(personNumber);
}

.person-info {
    flex: 1;
}

.person-info h3 {
    margin: 0;
    font-size: 1.2em;
    font-weight: bold;
    color: var(--text3);
}

.person-info h4 {
    margin: 3px 0 5px 0;
    font-style: italic;
    color: var(--text1);
}

.person-info p {
    margin: 2px 0;
    line-height: 1.4;
    text-align: justify;
}

.person-info ul, .person-info ol {
    margin: 5px 0 5px 20px;
    padding: 0;
}

.person-info li {
    margin-bottom: 3px;
    line-height: 1.4;
}
.person-group-title {
    font-weight: bold;
    margin: 25px 35px 10px;
    padding: 8px 10px;
    color: var(--text2);
	border-bottom: 2px solid var(--linie1);
    font-size: 16px;
    color: var(--text1);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 8px;

}
.lists_h2{
	font-family: "YoungSerif-Bold", sans-serif;
    font-size: 15px;
    width: 180px;
    margin: auto;
    color: var(--text2);
    text-align: center;
    line-height: 100%;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
    background: var(--background3);
    /* border-bottom: 1px solid var(--accent1); */
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.lists_content_wiki {
	    font-size: 13px;
    margin: auto;
    padding: 20px;
    text-align: justify;
    border: 1px solid var(--linie1);
    border-radius: 5px;
    background: var(--background);
    width: 90%;
    margin-bottom: 30px;
    color: var(--text1);
}
/* Camden Village NPC-Verwaltung – Ergänzung zum vorhandenen person-card CSS */
.cv-npc-form { margin:25px auto 35px; padding:20px; box-sizing:border-box; }
.cv-npc-form-grid { display:grid; grid-template-columns:minmax(150px,.65fr) minmax(320px,1.65fr); gap:12px 18px; }
.cv-npc-field { display:flex; flex-direction:column; gap:5px; }
.cv-npc-field.full { grid-column:1 / -1; }
.cv-npc-field label { font-weight:bold; }
.cv-npc-field input, .cv-npc-field select, .cv-npc-field textarea { width:100%; box-sizing:border-box; padding:8px; }
.cv-npc-field-name input { padding:9px 10px; }
.cv-npc-detail-row { display:flex; gap:8px; margin-bottom:7px; }
.cv-npc-detail-row input { flex:1; }
.cv-npc-detail-remove { cursor:pointer; min-width:32px; border-radius:3px; }
.cv-npc-actions { margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }
.cv-npc-button { cursor:pointer; padding:8px 14px; border-radius:3px; }
.cv-npc-card-actions { margin-top:8px; font-size:11px; opacity:.8; }
.cv-npc-card-actions a, .cv-npc-card-actions button { margin-right:8px; }
.cv-npc-card-actions form { display:inline; }
.cv-npc-card-actions button { border:0; background:none; padding:0; cursor:pointer; font:inherit; }
.cv-npc-message { margin:15px 0; padding:10px; }
.cv-npc-group-title { grid-column:1/-1; }
@media (max-width:700px) { .cv-npc-form-grid { grid-template-columns:1fr; } .cv-npc-field.full { grid-column:auto; } }


/* Rueckmeldung nach Eintragen, Bearbeiten oder Loeschen */
.cv-npc-notice {
    margin: 20px auto 12px;
    padding: 10px 14px;
    width: calc(100% - 80px);
    box-sizing: border-box;
    border: 1px solid #a94f35;
    border-radius: 3px;
    text-align: center;
    font-weight: bold;
}

/* Navigation zurück zu den Camden-Listen */
.cv-npc-backlink {
    text-align: center;
    margin: 35px 0;
}
.cv-npc-backlink-bottom {
    margin-top: 45px;
    margin-bottom: 25px;
}
.lists_age_block {
    width: 30%;
    min-width: 0;
}

.lists_age_heading {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: "YoungSerif-Bold", sans-serif;
    font-size: 15px;
    color: var(--links);
    line-height: 1.4;
    padding: 0;
    margin: 10px 0 12px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.lists_age_heading::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--links);
    opacity: 0.55;
}